什么是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 |
判断localStorage
if(!window.localStorage){ alert("浏览器支持localstorage"); return false; }else{ //开始浪 } |
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> |