- 关于客户端存储技术
- storage
一、关于客户端(浏览器)存储技术
浏览器的存储技术第一个能想到的应该就是cookie，关于cookie本身出现的初衷是为了解决客户端识别，可存储信息量小（4k左右），并且每次网络请求都会被请求协议携带发送到服务器，这在一定程度上是比较浪费网络资源，损耗性能。
在HTML5中提供了一个新的客户端存储技术Storage：
cookie与storage的异同：
相同点：同样受同源策略影响，只有在域名一致的情况下才能查看到对应的数据。
不同点：
1.cookie的数据存储量在4K左右，storage的存储量大约在5MB左右；
2.navigator.cookieEnabled检测是否启用了cookie，也就说cookie可以认为控制是否启用。storage则是自动启用，不会被人为关闭。
3.coocie中不建议使用分号、逗号、空格等特殊字符；如果需要使用可以使用转码操作：
encodeURIComponent()//传入特殊字符转码，可以应用转码作为简单的加密处理 decodeURIComponent()//将转码的字符转换为正常字符
storage中只能接收字符串类型的数据，具体操作见下一节。
4.cookie有时效性可以设置有效时间，如果不设置的话在浏览器窗口关闭时就会失效；storage是永久存储。
5.cookie会与服务器通信；storage只存在客服端，不参与服务器通信。
关于cookie的网络应用可以参考这篇博客：计算机网络(HTTP)之客户识别：cookie机制
二、Storage的应用
- localStorage：永久存储，除非手动删除
- sessionStorage：临时存储，窗口关闭就会被清除
写入与读取localStorage数据：
1 // 写入数据 2 localStorage.name = "duyi"; 3 localStorage.obj = JSON.stringify({ 4 name:'dengge' 5 }) 6 // 读取数据 7 var name =localStorage.name; 8 var obj = JSON.parse(localStorage.obj);
写入后可以在控制台的Application中查看得到数据：
localStorage与sessionStorage的写入与读取等操作方式一致，Storage的API及属性（同时适应localStorage和sessionStorage）：
Storage.length：数据量（返回一个整数，标识存储在Storage对象中的数据项数量）；
Storage.key(index)：获取键名（该方法接收一个数值，返回对应数据的键名）；
Storage.getItem(item)：获取与键对应的值（该方法接收一个键名作为参数，返回键名对应的值）；
Storage.setItem(item,val)：添加Storage数据（该方法接受两个参数，第一个参数为数据名称，第二个为数据值）；
Storage.removeItem(item)：删除指定的数据（该方法接收一个键名，并把该键名对应的数据从存储中删除）；
Storage.clear()：清除该域下的所有Storage缓存的数据。