Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息"。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
区别：
- cookie在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会自动把数据发送给服务器，仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。
- cookie可以设置过期日期，sessionStorage是会话级的数据，浏览器窗口关闭即清楚，localStorage是永久性的数据，一旦赋值，不管多长时间这值都是存在的，除非手动清除。
- cookie的存储大小受限制，一般不超过4k，而localStorage和sessionStorage的存储大小一般不超过5M，大大提高了存储的体积。
- sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效，而cookie和localStorage都是跨窗口的，即使浏览器的窗口关闭，这两个值还是存在的。
常用场景：
- localStorage可以用来统计页面访问次数。
- sessionStorage可以用来判断当前页面用户登录状态。
- cookie一般存储用户名密码相关信息，一般使用escape转义编码后存储。
/*cookie*/
//cookie操作相对比较多通常都会自己封装几个方法
let fiveCookie = {
/**
* @desc 设置Cookie
* @param {String} name
* @param {String} value
* @param {Number} days
*/
set: function(name, value, days) {
if(days) {
var date = new Date();
date.setDate(date.getDate() + days);
document.cookie = name + '=' + value + ';expires=' + date;
} else {
document.cookie = name + '=' + value + ';';
}
},
/**
* @desc 根据name读取cookie
* @param {String} name
* @return {String}
*/
get: function(name) {
var arr = document.cookie.replace(/\s/g, "").split(';');
for(var i = 0; i < arr.length; i++) {
var tempArr = arr[i].split('=');
if(tempArr[0] == name) {
return decodeURIComponent(tempArr[1]);
}
}
},
/**
* @desc 根据name删除cookie
* @param {String} name
* @return {String}
*/
remove: function(name) {
// 设置已过期，系统会立刻删除cookie
this.FiveGetCookie(name, '1', -1);
},
}
//使用
fiveCookie.set('key','value','day');
fiveCookie.get('key');
fiveCookie.remove('key');
----------------------------------------------------------------------------
/*localStorage,sessionStorage*/
//标准语法
//保存数据：
localStorage.setItem("key", "value");
sessionStorage.setItem("key", "value");
//读取数据：
localStorage.getItem("key");
sessionStorage.getItem("key");
//删除指定键的数据：
localStorage.removeItem("key");
sessionStorage.removeItem("key");
//删除所有：
localStorage.clear();
sessionStorage.clear();
人有两条路要走，一条是必须走的，一条是想要走的，必须先走好必须要走的路，才能接下来把想要走的路走好！
