html 本地存储

一.cookie：是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现session的一种方式。而session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中。

　　1.cookie：键值对形式存储。

　　　　ex: document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

　　2.目的：可以跟踪会话，也可以保存用户喜好或者保存用户名，密码等。

　　3.内容：名字，值，过期时间，路径，域。

　　4.优点：1）数据存放在客户的浏览器上。

　　　　　　2）可设置永不过期。

　　　　　　3）通过加密和安全技术，可以减少被破解的可能性。　　　　　

 

　　5.缺点：1）大小受到限制-单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

　　　　　　2）不安全-如果cookie被拦截，可以分析获取放在本地的所有cookie并进行cookie欺骗。

　　　　　　3）每次提交都要发送请求，不需要的数据也会传到服务器；传输效率低。

　　注：详细用法见:http://www.runoob.com/js/js-cookies.html

二.webStorage：在客户端本地存储数据，替代cookie。webStorage 分 localStorage 和 sessionStorage。

　　1.公有方法或属性：1）length

　　　　　　　　　　　　　唯一属性，只读，用来获取storage内的键值对数量（返回一个整数，获取存储在sessionStorage对象中的数据项(键值对)数量）。

　　　　　　　　　　　2）.key=value

　　　　　　　　　　　　　根据index获取storage的键名（ 返回当前对象的第 index 序号的 key 名称；若没有返回 null）。

　　　　　　　　　　　3) .setItem(string key,string value)

　　　　　　　　　　　　　为storage内添加键值对（两个参数，将键值对添加存储中；如果存在，则更新其对应的值）。

　　　　　　　　　　　4) .getItem(key)

　　　　　　　　　　　　    根据key值获取storage内对应的value（返回键名(key)对应的值(value)；若没有返回 null ）。

　　　　　　　　　　　5) .removeItem(string key)

　　　　　　　　　　　　　根据键名，删除键值对（将指定的键名key从sessionStorage对象中移除）。

　　　　　　　　　　　6) .clear() --清空session对象（清除sessionStorage对象中的所有项）。

　　2.localStorage：在本地永久性存储，除非显示将其删除或清空。

　　　sessionStorage：存储的数据只在会话期间有效，关闭浏览器则自动删除。

　　3.浏览器支持情况：

　　　除IE7及以下不支持外，其他标准浏览器（IE 8；chrome 5；Firefox 3；Opera 10.5；Sarari 4.0）都完全支持。

　　4.sessionStorage特点：

　　　1）同源策略限制。

　　　　　　若在不同页面操作同一个sessionStorage，则这些页面必须在同一协议、同一主机、同一端口下（IE8，IE9仅要求统一主机名，忽略协议和端口号）。

　　　2）单标签页。

　　　　　　sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。

　　　3）只在本地存储。

　　　　　　seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。

　　　4）存储方式。

　　　　　　seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。

　　　5）存储上限限制。

　　　　　　不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

　

　　5.localStorage 特点：

　　　1）同源策略限制。

　　　　　　若想在不同页面之间对同一个localStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)。

　　　2）只在本地存储。

　　　　　　localStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效。

　　　3）永久保存。

　　　　　　保存的数据没有过期时间，直到手动去除。

　　　4）存储方式。

　　　　　　localStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。

　　　5）存储上限限制。

　　　　　　不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

　　　6）同浏览器共享。

　　　　　　localStorage的数据可以在同一个浏览器的不同标签页的同源页面之间共享。

　　6.应用场景：

　　　　1）sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。

　　　　2）localStorage 比较适用2个地方：

　　　　　　（1） 临时保存数据比较多的信息。如在线编辑文章时的自动保存。

　　　　　　（2） 多页面访问共同数据。sessionStorage只适用于同一个标签页，localStorage相比而言可以在多个标签页中共享数据。

　　7.localStorage、sessionStorage存储数据的3中方法：

　　　　       

　　8.存储Json对象：

　　　　localStorage 、sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。