JavaScript 存储对象

Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息"。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

区别：

1. cookie在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会自动把数据发送给服务器，仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。
2. cookie可以设置过期日期，sessionStorage是会话级的数据，浏览器窗口关闭即清楚，localStorage是永久性的数据，一旦赋值，不管多长时间这值都是存在的，除非手动清除。
3. cookie的存储大小受限制，一般不超过4k，而localStorage和sessionStorage的存储大小一般不超过5M，大大提高了存储的体积。
4. sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效，而cookie和localStorage都是跨窗口的，即使浏览器的窗口关闭，这两个值还是存在的。

常用场景：

1. localStorage可以用来统计页面访问次数。
2. sessionStorage可以用来判断当前页面用户登录状态。
3. 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();

人有两条路要走，一条是必须走的，一条是想要走的，必须先走好必须要走的路，才能接下来把想要走的路走好！