cookie，localstorage和sessionstorage

• cookie的概念

  cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件，它可以包含相关用户的信息。无论何时用户链接到服务器，Web站点都可以访问Cookie信息。比如：自动登录、记住用户名，记住一些和用户相关的信息等

• cookie的特点

  -禁用cookie后，无法正常注册登陆；
  -cookie是与浏览器相关的，不同浏览器之间所保存的cookie也是不能互相访问的；
  -cookie可以被删除。因为每个cookie都是硬盘上的一个文件；
  -cookie安全性不够高-xss攻击

• cookie的使用

  -cookie的添加-
  键值对，自定义键名，值一定是字符串
  
  存储数组和对象：
  带有过期时间的cookie：
  
  -cookie的获取-
  如果cookie不存在，输出undefined；
  封装cookie，实现传入key，输出value ，已存入：name=张三; age=100; sex=男， 每一项继续进行转数组name=张三，age=100，sex=男
  第一次 newarr = [name,张三]
  第二次 newarr = [age,100]
  第三次 newarr = [sex,男]
  let newarr = arr[i].split(’=’);
  newarr[0]
  传入的值和数组的第一项(key)进行比较，满足条件输出newarr[1]的value。

cookie封装：

    let cookie = {
        set: function(name, value, days) {
            let d = new Date();
            d.setDate(d.getDate() + days)
            document.cookie = `${name}=${encodeURIComponent(value)};expires=${d};path=/`;
        },
        get: function(name) {
            var arr = document.cookie.split('; ');
            var newarr = [];
            for (let i = 0; i < arr.length; i++) {
                newarr[i] = arr[i].split('=');
            }
            for (let value of newarr) {
                if (name == value[0]) {
                    console.log(decodeURIComponent(value[1]));
                }
            }
        },
        unset: function(name) {
            this.set(name, '', -1)
        }
    }

    cookie.set('姓名', '张三',10);
    cookie.set('xingbie', 'xhahahha', 10);
    cookie.get('姓名');//'张三'

• cookie,locastorage,sessionstorage区别

  locastorage,sessionstorage html5新增的;
  localStorage拓展了cookie的4K限制，永久存储，除非手动删除;
  cookie可以自由设定过期时间;
  cookie需要服务器。

  -localstorage的特点-

  1、localStorage拓展了cookie的4K限制，永久存储，除非手动删除。
  2、localStorage会将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，但只有在高版本的浏览器中才支持的。
  3、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
  4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
  5、不同的浏览器本地存储不能相互进行访问。
  6、sessionstorage会话结束就消失。

		**localStorage存储：**
        //点操作符存储
        window.localStorage.name = 'zhangsan';
        //中括号方式存储[]
        window.localStorage['age'] = 100;
        //利用内置的方法存储
        window.localStorage.setItem('sex', '男');
        存储对象
        let obj = {
            a: 1,
            b: 2,
            c: 3
        }
        localStorage.setItem('objdata', JSON.stringify(obj));

        **localStorage获取**
        console.log(localStorage.name);
        console.log(localStorage['age']);
        console.log(localStorage.getItem('objdata'));
        console.log(JSON.parse(localStorage.getItem('objdata')));//eval()


        **localStorage删除**
        localStorage.removeItem('name');
        localStorage.clear();//删除所有

        **sessionStorage:会话结束**//sessionStorage属于当会话结束的时候，存储的值会被清空
        sessionStorage.setItem('a', 10000);