什么是localStorage
HTML5加入了localStorage，作為客戶本地存儲文件，之前用cookie，但是每條cookie空間為4K localStorage 支持5M
一張圖了解下客戶端瀏覽器的存儲發展史
瀏覽器支持情況
| Feature | Chrome | Firefox | Internet Explorer | Opera | Safari | Android | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| localStorage | 4 | 3.5 | 8 | 10.50 | 4 | 2.1 | 11 | iOS 3.2 |
| sessionStorage | 5 | 2 | 8 | 10.50 | 4 | 2.1 | 11 | iOS 3.2 |
特點
1. 字符串存儲：localStorage存儲的值均為String 字符串
把對象轉換成json字符串，就能讓存儲對象了；把圖片轉換成DataUrl（base64），就可以存儲圖片了。月小升試過音樂也可以轉成字符串存。
2. 無法隱私：localStorage在瀏覽器的隱私模式下不可用
3. 爬蟲情況：無法讀取localStorage
4. 無法跨域： a.com 的localStorage 無法被b.com 直接讀取
5. 過期時間：一直有效，客戶不主動清空，那么數據一直在
判斷localStorage
if(!window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
//開始浪
}
HTML5 localStorage 增刪改遍歷
1. HTML5 寫入localStorage
標准寫法
var storage=window.localStorage;
storage.setItem("name","tom");
官方不太推薦，但是支持的寫法
storage["name"]="tom"; storage.name="tom";
2. HTML5 讀取localStorage
標准寫法
var a1=storage.getItem("name");
官方不太推薦，但是支持的寫法
var a2=storage.name; var a3=storage["name"];
3. HTML5 更新localStorage
更新？html5的localStorage 存的時候是單鍵值對 key-value模式，重新寫一遍name就是更新了
storage.setItem("name","Jack");
4. HTML5 刪除localStorage
storage.removeItem("name");
5. HTML5 遍歷localStorage 所有key 和 value數據
var storage=window.localStorage;
storage.setItem("name1","tom");
storage.setItem("name2","jack");
storage.setItem("name3","Lucy");
for(var i=0;i<storage.length;i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + " - " + value);
}
6. HTML5 測試代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試localStorage</title>
</head>
<script>
if(!window.localStorage){
alert("瀏覽器不支持localstorage");
}else{
var storage=window.localStorage;
storage.setItem("a","tom");
console.log(typeof storage["a"]);
//第一種方法讀取
var a1=storage.getItem("a");
console.log(a1);
}
</script>
<body>
</body>
</html>
https://java-er.com/blog/html5-localstorage-all
MORE================