localStorage使用很简单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javascript"> window.onload = function() { window.localStorage.clear(); //清除所有的变量和值 window.localStorage.a = 100; window.localStorage["b"] = 200; window.localStorage.setItem("c", 300);; console.log("window.localStorage.a=" + window.localStorage.a); console.log("window.localStorage["b"]=" + window.localStorage["b"]); console.log("window.localStorage.getItem("c")=" + window.localStorage.getItem("c")); console.log(window.localStorage); console.log(typeof window.localStorage); for (var i = 0; i < window.localStorage.length; i++) { var key1 = window.localStorage.key(i); var key2 = window.localStorage.getItem(key1); console.log("字段名:" + key1 + " 值:" + key2); } console.log(typeof window.localStorage.a); console.log(typeof window.localStorage["b"]); console.log(typeof window.localStorage.getItem("c")); console.log("空了:" + window.localStorage); window.localStorage.SB = "我是你大爷!"; window.localStorage.aaa = "this is test!"; window.localStorage.removeItem("aaa"); console.log("-------------------------------------------------"); var storage = window.localStorage; var data = { name: "xiecanyong", sex: "man", hobby: "program" }; var d = JSON.stringify(data); console.log(typeof d); storage.setItem("data", d); console.log(storage.data); var json = storage.getItem("data"); var jsonObj = JSON.parse(json); console.log(typeof jsonObj); console.log(storage.data); } </script> </head> <body> </body> </html>
原文链接:http://www.cnblogs.com/st-leslie/p/5617130.html
一、什么是localStorage、sessionStorage
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
二、localStorage的优势与局限
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
这里我们以localStorage来分析
三、localStorage的使用
localStorage的浏览器支持情况:
这里要特别声明一下,如果是使用IE浏览器的话,那么就要UserData来作为存储,这里主要讲解的是localStorage的内容,所以userData不做过多的解释,而且以博主个人的看法,也是没有必要去学习UserData的使用来的,因为目前的IE6/IE7属于淘汰的位置上,而且在如今的很多页面开发都会涉及到HTML5CSS3等新兴的技术,所以在使用上面一般我们不会去对其进行兼容
首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性