cookie，localstorage和sessionstoragejsonhj6321567的博客-

• cookie的概念

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

• cookie的特点

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

• cookie的使用

  –cookie的添加–
  键值对，自定义键名，值一定是字符串
  
  存储数组和对象：
  带有过期时间的cookie：
  
  -cookie的获取–
  如果cookie不存在，输出undefined；
  封装cookie，实现传入key，输出value ，已存入：me=张三; 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);