一：cookie、webStorage（localStorage和sessionStorage）。

转载：https://www.cnblogs.com/qiujianmei/p/10824682.html，https://www.cnblogs.com/monsterooo/p/6815392.html

一、客户端存储方式主要由两种：cookie、webStorage（localStorage和sessionStorage）

Cookie基于HTTP规范，用来识别用户。

Cookie是服务器发送到浏览器的一小段数据，会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

Cookie诞生之初的作用就是解决HTTP的无状态请求，用来记录一些用户相关的一些状态。

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

因为一些前端交互的需要，后来cookie也被用于存储一些客户端的数据。

Cookie的原生api不友好，需要自行封装一下。下面是封装后的方法。

cookie格式：document.cookie="key=value[; expires=date][; domain=domain][; path=path][; secure]"

• key=value
  key设置的是cookie的键，value设置的是cookie的值。示例如下：
  document.cookie = "name=monsterooo";
  

• expires
  设置cookie的生存时间，默认为当然浏览器会话(Session)。当设置一个时间时，每次访问浏览器会用当前时间和cookie的expries做比对，如果过期cookie则会被删除。设置格式为GMT时间格式。示例如下：

      var t = new Date( +(new Date()) + 1000 * 120 );
      document.cookie = `name=monsterooo;expires=${t.toGMTString()};`;
  

  

• domain
  在浏览器读取cookie的时候只有当cookie的domain和浏览器当然的域名匹配才能读取到。默认情况下cookie的domain和当然访问一样。但是很多网址不止有一个域名比如：a.example.com和b.example.com如果他们想要共享cookie那么cookie的domain需要设置为domain=.example.com，path路径需要设置为path=/。这样之后两个域名都能同时访问到cookie了。

  var t = new Date( +(new Date()) + 1000 * 120 );
  document.cookie = `name=monsterooo;expires=${t.toLocaleTimeString()}; domain=.example.com; path=/`;
  

• path
  path路径和domain功能类似，只是path的范围更小。path控制cookie在当前域名的路径，只有路径相匹配cookie才能被读取到。在www.example.com/order/index.html中cookie设置如下 document.cookie = `order=10; expires=${t.toGMTString()}; path=/order`;，那么只有在/order路径下的页面cookie中才会带有order值。

创建cookie

/**

* @description js原生设置cookie

* @param {String} name 给你要设置的cookie起个名字（key）

* @param {String} value cookie的具体内容(value)

* @param {String} expiredays 设置cookie的过期时间，单位：天

*/

function setCookie(name, value, expiredays) {

var exdate=new Date();

exdate.setDate(exdate.getDate() + expiredays);

document.cookie = name + '=' + escape(value)+ ((expiredays == null) ? '' : ';expires=' +exdate.toGMTString());

}

获取cookie

/**

* @description js原生获取cookie方法1

* @param {String} name 你要获取的cookie名

*/

function getCookie(name) {

　　if (document.cookie.length > 0) {

　　　　var start = document.cookie.indexOf(name + '=');

　　　　if (start !== -1) {

　　　　　　start = start + name.length + 1;

　　　　　　var end = document.cookie.indexOf(';', start);

　　　　　　if (end === -1) {

　　　　　　　　end = document.cookie.length;

　　　　　　　　return unescape(document.cookie.substring(start, end));

　　　　　　}
　　　}

　　}

　　return '';}

 

/**

* @description js原生获取cookie方法2

* @param {String} name 你要获取的cookie名

*/

function getCookie(name) {

　　var cookieArr = document.cookie.split(';') || [];

　　if(!cookieArr.length){

　　　　return '';

　　}

　　for(var i = 0; i < cookieArr.length; i ++){

　　　　var key = $.trim(cookieArr[i]).split('=')[0];

　　　　var value = $.trim(cookieArr[i]).split('=')[1];

　　　　if(key === name){

　　　　　　return value;

　　　　}

　　}

}

检查cookie是否已存在

function checkCookie() {

　　username = getCookie('username');

　　if (username !== null && username !== '') {

　　　　alert('Welcome again ' + username + '!');

　　} else {

　　　　username = prompt('Please enter your name:', '');

　　　　if (username !== null && username !== '') {

　　　　　　setCookie('username',username,365);

　　　　}

　　}

}

读取cookie

$.cookie('name'); //name存在返回对应value,不存在返回null

删除cookie

//成功删除cookie时返回true，否则返回false

$.removeCookie('name'); // => true

$.removeCookie('nothing'); // => false
注意：删除cookie时，必须传递用于设置cookie的完全相同的路径，域和安全选项，除非您依赖于默认选项。

即：设置cookie时如果设置了path属性或secure属性，删除的时候要带着这些属性，否则无法成功删除cookie。

// This won't work!

$.removeCookie('name'); // => false

// This will work!

$.removeCookie('name', { path: '/' }); // => true
TODO：$.removeCookie无效？（jquery1.9.1.js + jquery.cookie.js，插件无重复引用的情况，$.removeCookie提示undefined）

webStorage基于HTML5规范

HTML5 提供了两种在客户端存储数据的新方法：localStorage和sessionStorage，挂载在window对象下。

webStorage是本地存储，数据不是由服务器请求传递的。从而它可以存储大量的数据，而不影响网站的性能。

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。比如客户端需要保存的一些用户行为或数据，或从接口获取的一些短期内不会更新的数据，我们就可以利用Web Storage来存储。

localStorage的生命周期是永久性的。localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。如果 想设置失效时间，需自行封装。
sessionStorage 的生命周期是在浏览器关闭前。
　　特性：

关闭浏览器sessionStorage 失效；
页面刷新不会消除数据；
只有在当前页面打开的链接，才可以访sessionStorage的数据，使用window.open打开页面和改变localtion.href方式都可以获 取到sessionStorage内部的数据;

 

总结：

 

存储方式	作用与特性	存储数量及大小	api
cookie	● 存储用户信息，获取数据需要与服务器建立连接。 ● 可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能。 ● 可设置过期时间。	● 最好将cookie控制在4095B以内，超出的数据会被忽略。 ● IE6或更低版本最多存20个cookie； IE7及以上版本最多可以有50个；Firefox最多50个；chrome和Safari没有做硬性限制。	原生、$.cookie（详见上文）
localStorage	● 存储客户端信息，无需请求服务器。 ● 数据永久保存，除非用户手动清理客户端缓存。 ● 开发者可自行封装一个方法，设置失效时间。	5M左右，各浏览器的存储空间有差异。（感兴趣的同学可以自己试一下）。	// 保存数据到 localStorage localStorage.setItem('key', 'value'); // 从 localStorage 获取数据 let data = localStorage.getItem('key'); // 从 localStorage 删除保存的数据 localStorage.removeItem('key'); // 从 localStorage 删除所有保存的数据 localStorage.clear();
sessionStorage	● 存储客户端信息，无需请求服务器。 ● 数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。	同localStorage	// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();

 

存储方式	作用与特性	存储数量及大小	api
cookie	● 存储用户信息，获取数据需要与服务器建立连接。 ● 可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能。 ● 可设置过期时间。	● 最好将cookie控制在4095B以内，超出的数据会被忽略。 ● IE6或更低版本最多存20个cookie； IE7及以上版本最多可以有50个；Firefox最多50个；chrome和Safari没有做硬性限制。	原生、$.cookie（详见上文）
localStorage	● 存储客户端信息，无需请求服务器。 ● 数据永久保存，除非用户手动清理客户端缓存。 ● 开发者可自行封装一个方法，设置失效时间。	5M左右，各浏览器的存储空间有差异。（感兴趣的同学可以自己试一下）。	// 保存数据到 localStorage localStorage.setItem('key', 'value'); // 从 localStorage 获取数据 let data = localStorage.getItem('key'); // 从 localStorage 删除保存的数据 localStorage.removeItem('key'); // 从 localStorage 删除所有保存的数据 localStorage.clear();
sessionStorage	● 存储客户端信息，无需请求服务器。 ● 数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。	同localStorage	// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();