localStorage, sessionStorage, cookie简介

1.cookie

cookie是由服务器端生成，发送给浏览器，浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器。

例如: 首次登陆淘宝网站时, 淘宝web服务器在把网页发给你的同时, 会在我们的电脑里生成一个cookie文件 , cookie会记录我们的 登录信息( eg:有效期内再次登录淘宝,不需要重新输入登录信息 ), 个性设置 ( eg:界面外观设置,下次浏览时自动呈现 ) , 用户行为( eg: 下次浏览时, 首页为你推荐你近期浏览过的商品)

cookie的存储量仅有 4K.
cookie有效期,取决于各个网站设置 (有的几个小时,有的几个月不等)

2.WebStorage

WebStorage: 是H5新兴的本地浏览器存储, 分为localStorage与SeeeionStorage
WebStorage: 仅在本地保存, 只有本地浏览器端可访问数据。 不会自动把数据发给服务器，除非故意通过POST或者GET的通道发送到服务器

sessionStorage 和 localStorage的存储容量有 5M , 相比于cookie有了较高的提升。

(1) sessionStorage VS localStorage

项目	存储数据有效期	数据删除	不同浏览器同一页面数据共享
sessionStorage	当前会话	当前浏览器窗口关闭, 数据自动销毁	不能在不同的浏览器窗口共享, 即使是同一个页面.
localStorage	永久保存	除非主动手动删除数据，否则数据是永远不会过期	在所有同源窗口中都是共享的.

(2) WebStorage用法

sessionStorage 和 localStorage 用法完全相同

保存数据 : sessionStorage.setItem( key ,value); #key键 #value值(成对保存)
获取数据 : var value = sessionStorage.getItem(key); #获取value var key = sessionStorage.key(0)#获取 key
删除数据 : sessionStorage.removeItem(key);#删除一组数据 sessionStorage.clear();#清空所有数据
数据长度 : sessionStorage.length#几对数据

(3) 注意事项

建议使用WebStorage客户端存储时, 只存储对安全要求低的数据.(eg: 用户登录昵称,购物车列表等 ; 而用户密码这种对安全性要求高的数据,不适合存储 )