浏览器存储之cookie 与 webStorage

1. cookie属于文档对象模型DOM树根节点document，而 sessionStorage 和 localStorage 属于浏览器对象模型BOM的对象window，后两者是由HTML5 Web Storage API提供的
2. cookie存储的数据会在客户端与服务端进行传输，cookie存储的数据在浏览器关闭后仍然存在，只要没有超过到期时间，存储的数据量最大为4k，每个域名最多传输20条cookie数据，在所有同源窗口下使可以共享的

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/" // 设置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT" // 删除cookie（设置到期时间为当前时间以前的某个时间即可）

3. localStorage存储的数据不参与网络传输，保存在本地，默认情况下数据是永久存在的，除非手动删除，对于每个域名，存储容量为5M，在同源窗口中是可以共享的

window.localStorage.username = 'hehe' // 设置
window.localStorage.setItem('username', 'hehe') // 设置
window.localStorage.getItem('username') // 读取
window.localStorage.removeItem('username') // 删除
window.localStorage.key(1) // 读取索引为1的值
window.localStorage.clear() // 清除所有

4. sessionStorage存储的数据也不参与网络传输，保存在本地，当页面关闭后数据被释放，不再保存，存储容量为5M，数据不在不同的浏览器页面中共享，即使是同一个页面（刷新页面不会清除）。
5. cookie中保存的是字符串。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
6. 使用这些方式存储的时候需要时刻注意是否有代码存在 XSS 注入的风险。所以千万不要用它们存储你系统中的敏感数据。
7. sessionStorage与页面js数据对象的区别
   1）页面中一般的js对象的生存期仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了
   2）sessionStorage只要同源的同窗口中，刷新页面或进入同源的不同页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在