客户端存储方式

* 客户端存储的三种方式

https://blog.csdn.net/ruby_xc/article/details/65939988

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

1. cookie

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

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

　　- cookie属于document对象

　　- 在控制台中设置cookie，获取cookie，在Application中可以看到cookie

　　document.cookie = "ck_hxh=jkdfkjgk;path=/";

　　$.cookie("ck_hxh");

　　好处：可以下次刷新页面，可以继续保持页面的状态；

　　document.cookie是获取所有的cookie； document.cookie.split(';');通过；分隔cookie

2. web存储

　　Web存储最初作为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();

 

　　- 查看所有的session：window.sessionStorage;

　　- session属于window对象

1、localStorage：没有时间限制；跨多个窗口，持续范围超过当前会话，浏览器关闭再打开数据依然是可用的。通过js删除或用户清除浏览器缓存。注意对应的是同一域名

2、sessionStorage：是全局对象，维护页面会话期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续；当页面重新载入reload时或者被恢复restore时，页面会话也是一直存在； 新标签或新窗口中打开新页面，会初始化一个新的会话；