客户端存储方式

* 客户端存储的三种方式

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对象

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

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