【JavaScript学习】Cookie & Web Storage

Cookie 存储机制的优缺点

Cookie 是 HTML4 中在客户端存储简单用户信息的一种方式，它使用文本来存储信息。当有应用程序使用Cookie时，服务器端就会发送Cookie到客户端，客户端浏览器将保存该信息。下一次页面请求时，客户端浏览器就会把Cookie发送到服务器。

优点：

• 简单易用。
• 浏览器负责发送数据。
• 浏览器自动管理不同站点的Cookie。

缺点：

• 使用简单的文本存储数据，所以 Cookie 的安全性很差。Cookie 保存在客户端浏览器，很容易被黑客窃取。
• Cookie 中存储的数据容量有限，其上限为4KB。
• 存储 Cookie 的数量有限，多数浏览器上限为30或50个，而 IE6 只支持每个域名存储20个 Cookie ，也有部分浏览器存储 Cookie 的数量高达300个。
• 如果浏览器的安全配置为最高级别，则 Cookie 会失效。
• Cookie 不适合大量数据的存储，因为 Cookie 会由每个对服务器的请求来传递，从而造成 Cookie 速度缓慢效率低下。

Web Storage 介绍

HTML5 的 Web Storage 提供了两种在客户端存储数据的方法，即 localStorage 和sessionStorage。

localStorage

localStorage 是一种没有时间限制的数据存储方法，可以将数据保存在客户端的硬盘或其他存储器，存储时间可以是一天、两天、几周或几年，浏览器的关闭并不意味着数据也随之消失，当再次打开浏览器时，依然可以访问这些数据。localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

sessionStorage

sessionStorage 指的是针对一个 session 的数据存储，即将数据保存在 session 对象中。

Web 中的 session 指的是用户在浏览某个网站时，从进入到网站到关闭浏览器窗口所经过的这段时间，可以称为用户与浏览器进行交互的“会话时间”。

session 对象用来保存这个时间段内所有要保存的数据，当用户关闭浏览器窗口后，这些数据会被删除。
sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。

Web Storage 的优缺点

优点

• 存储空间：
  
  • 存储空间更大。IE8 下每个独立的存储空间为 10M，其他浏览器实现略有不同，但都比 Cookie 要大得多。
  • 每个域（包括子域）都有独立的存储空间，各个存储空间完全独立，因此不会造成数据混乱。
• 服务器：存储内容不会发送到服务器。当设置了 Cookie 后，Cookie 的内容会随着请求一并发送到服务器，这对于本地存储的数据是一种带宽浪费，而 Web Storage 中的数据则仅仅存在于本地，不会与服务器发生任何交互。
• 接口：更多丰富易用的接口。

缺点

• 浏览器会为每个域分配独立的存储空间，即脚本在域A中时无法访问到域B中的存储空间的，但是浏览器却不会检查脚本所在的域与当前域是否相同，即在域B中嵌入域A中的脚本依然可以访问域B中的数据。
• 存储在本地的数据未加密而且永远不会过期，极易造成隐私泄露。

Web Storage 的用法

// localStorage的用法

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）
window.localStorage.getItem(key);//获取指定key的数据
window.localStorage.removeItem(key);//删除指定key的数据
window.localStorage.clear();//清空所有的存储数据

// sessionStorage的用法

window.sessionStorage.setItem(key,value);
window.sessionStorage.getItem(key);
window.sessionStorage.removeItem(key);
window.sessionStorage.clear();