webStorage （Window.sessionStorage 和 Window.localStorage）
1. 存儲内容大小一般支援5MB左右（不同浏覽器可能還不一樣）
2. 浏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實作本地存儲機制。
3. 相關API：
1. ```xxxxxStorage.setItem('key', 'value');```
該方法接受一個鍵和值作為參數，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。
2. ```xxxxxStorage.getItem('person');```
該方法接受一個鍵名作為參數，傳回鍵名對應的值。
3. ```xxxxxStorage.removeItem('key');```
該方法接受一個鍵名作為參數，并把該鍵名從存儲中删除。
4. ``` xxxxxStorage.clear()```
該方法會清空存儲中的所有資料。
代碼示範
以LocalStorage為例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>localStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">點我儲存一個資料</button>
<button onclick="readData()">點我讀取一個資料</button>
<button onclick="deleteData()">點我删除一個資料</button>
<button onclick="deleteAllData()">點我清空一個資料</button>
<script type="text/javascript" >
let p = {name:'張三',age:18}
function saveData(){
localStorage.setItem('msg','hello!!!')
localStorage.setItem('msg2',666)
localStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log(localStorage.getItem('msg'))
console.log(localStorage.getItem('msg2'))
const result = localStorage.getItem('person')
console.log(JSON.parse(result))
// console.log(localStorage.getItem('msg3'))
}
function deleteData(){
localStorage.removeItem('msg2')
}
function deleteAllData(){
localStorage.clear()
}
</script>
</body>
</html>
當我們點選儲存按鈕之後 資料就會被添加到浏覽器裡 在浏覽器控制台Application選項中檢視 綠色框中就是儲存的資料
點選檢視就可以擷取到目前要檢視的值
點選删除就可以删除可以删除對應的資料 清空則可以清空全部的資料
備注：
1. SessionStorage存儲的内容會随着浏覽器視窗關閉而消失。
2. LocalStorage存儲的内容，需要手動清除才會消失。
3. ```xxxxxStorage.getItem(xxx)```如果xxx對應的value擷取不到，那麼getItem的傳回值是null。
4. ```JSON.parse(null)```的結果依然是null。