客户端储存的三种方式localStorage 、sessionStorage、Cookies

╰半橙微兮° 2022-07-13 07:26 112阅读 0赞

Web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上。这种客户端存储相当于赋予了Web浏览器记忆功能。比方说，Web应用就可以用这种方式来“记住”用户的配置信息甚至是用户所有的状态信息，以便准确地“回忆”起用户上一次访问时候的状态。客户端存储遵循“同源策略”，因此不同站点的页面是无法互相读取对方存储数据的，而同一站点的不同页面之间是可以互相共享存储数据的，它为我们提供了一种通信机制，例如，一个页面上填写的表单数据可以显示在另外一个页面中。Web应用可以选择它们存储数据的有效期：比如采用临时存储可以让数据保存至当前窗口关闭或者浏览器退出；采用永久存储，可以将数据永久地存储到硬盘上，永不失效。

客户端存储有以下三种形式：

**Web存储**

Web存储最初作为[**HTML5**][HTML5]一部分被定义成API形式，但是后来被剥离出来作为独立的一份标准了。该标准目前还在草案阶段，但其中一部分内容已经被包括IE8在内的所有主流浏览器实现了。Web存储标准所描述的API包含了 localStorage 对象和 sessionStorage 对象，这两种方式存储的数据不会自动发给服务器，仅仅是本地保存，有大小限制。这两个对象实际上是持久化关联数组，是名值对的映射表，“名”和“值”都是字符串。Web存储易于使用、支持大容量（但非无限量）数据存储同时兼容当前所有主流浏览器，但是不兼容早期浏览器。

localStorage是持久化的本地保存，除非主动删除，不然会一直存在，而且在所有的同源窗口中都是可以共享的；

sessionStorage是会话级别的本地保存，比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失，在不同浏览器窗口不会共享的，即使是同一个浏览器的同一个页面。

两者拥有一些共同的方法：

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）

window.localStorage.getItem(key);//获取指定key的数据

window.localStorage.removeItem(key);//删除指定key的数据

window.localStorage.clear();//清空所有的存储数据

window.sessionStorage.setItem(key,value);

window.sessionStorage.getItem(key);

window.sessionStorage.removeItem(key);

window.sessionStorage.clear();

**Cookies**

Cookie是一种早期的客户端存储机制，起初是针对服务器端脚本设计使用的。

Cookie 是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递，因此，不论服务器端是否需要，每一次HTTP请求都会把这些数据传输到服务器端。。Cookie 包含每次用户访问站点时 Web 应用程序都可以读取的信息。因为HTTP协议是无状态的，对于一个浏览器发出的多次请求，WEB服务器无法区分 是不是来源于同一个浏览器。所以，需要额外的数据用于维护会话。

Cookie只是一段文本，所以它只能保存字符串。而且浏览器对它有大小限制以及 它会随着每次请求被发送到服务器，所以应该保证它不要太大。 Cookie的内容也是明文保存的，有些浏览器提供界面修改，所以， 不适合保存重要的或者涉及隐私的内容。大多数浏览器支持最大为 4096 字节的 Cookie。由于这限制了 Cookie 的大小，最好用 Cookie 来存储少量数据，或者存储用户 ID 之类的标识符。用户 ID 随后便可用于标识用户，以及从数据库或其他数据源中读取用户信息。 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie；如果试图存储更多 Cookie，则最旧的 Cookie 便会被丢弃。有些浏览器还会对它们将接受的来自所有站点的 Cookie 总数作出绝对限制，通常为 300 个。

[HTML5]: http://lib.csdn.net/base/html5