Web 存儲 API 提供了 sessionStorage （會話存儲） 和 localStorage（本地存儲）兩個存儲對象來對網頁的數據進行添加、刪除、修改、查詢操作。
-localStorage 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。localstorage大小限制在500萬字符左右（大約5M），各個瀏覽器不一致。
- sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁之後將會刪除這些數據。
localStorage和sessionStorage的用法完全一樣，下面以localStorage爲例進行演示。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script type="text/javascript">
//判斷瀏覽器是否支持localstorage
if(window.localStorage){
console.info("瀏覽器支持localstorage");
}
//存數據
localStorage.setItem("name","zhangsan");
var data = {"id":1001,"name":"zhangsan","birth":"1999-09-21","score":90.5};
localStorage.setItem("info",JSON.stringify(data));//必須先將JSON對象轉換成JSON字符串
localStorage.age=88
localStorage["id"]=1001
//取數據
let name = localStorage.getItem("name");
console.info(name)
let age = localStorage.age;
console.info(age)
let id = localStorage["id"];
console.info(id)
let json = localStorage.getItem("info");
console.info(json)
console.info(JSON.parse(json).name)//必須先將JSON形式的字符串轉換成JSON對象才能進行處理
//循環遍歷所有數據
for(var i =0;i<localStorage.length;i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.info(i+"\t"+ key+"\t"+value);
}
//判斷數據類型
console.log(typeof localStorage["info"])
//刪除指定的key，
localStorage.removeItem("name");
console.info("name "+localStorage.getItem("name"))
//刪除所有的信息
// localStorage.clear();
console.log(localStorage)
</script>
</body>
</html>
結果：
