前端本地存储——cookie,localStorage,sessionStorage

一，关于浏览器本地存储

　　为何要有本地存储呢？举例：

        　   1.在先后端进行数据交互时，服务器没法知道多个请求是否来自同一个浏览器，以前的解决办法是在请求中插入一些参数，这须要使用包含参数的隐藏的表单，或者做为URL参数的一部分传递。这两个　　　　　解决方案都须要手动操做，容易出错。

　　　　2.通常在登陆系统中，用户登陆一次之后，若是没有本地存储，下一次登陆须要从新输入用户名和密码，用户体验繁琐。

二，cookie

　　cookie是存储于用户的计算机的变量，当用户访问了某个网站的时候，咱们能够经过cookie向访问者的电脑存储数据，下一次访问该网站时就会重新cookie中获取数据。（二次登陆时无需输入用户名密码）

　　具体如何工做？

　　当网页发送http请求时，浏览器会先检查是否有相应的cookie,若是有则自动添加在request header 的cookie字段中（若有该网站曾经登陆过得用户名密码则直接自动填入）。

　　使用javascript操做cookie:

//1.建立cookie
  function setCookie(name, value, expireDays) {
    let exdate = new Date();
    exdate.setDate(exdate.getDate() + expireDays);
    document.cookie = name + '=' + escape(value) + ((expireDays === null) ? '' : ';expires=' + exdate.toGMTString())
    console.log('cookie=', document, document.cookie);
    //toGMTString()方法根据格林威治时间把Date转化为字符串
  }
  setCookie('chenke', 'ckck', 2)

/*
    escape()函数对字符串进行编码，这样就能够在全部的计算机上读取该字符串
    console.log((escape("?!=()#%&"),escape("Visit W3School!"))
    Visit%20W3School%21    %3F%21%3D%28%29%23%25%26
*/

//读取，经过document.cookie来获取当前网站下的cookei的时候，获得的字符串形式的值，包含了当前网站下全部的cookie,它会吧全部的cookie经过一个分号+空格的形式串联起来，例如：name=chenke;job=coding.

function getCookie(name){
   if(document.cookie.length>0){
     let start=document.cookie.indexOf(name+'=')
     if(start!==-1){
        start=startTag+name.length+1;  
        end=document.cookie.indexOf(';',start)
        if(end===-1){
         end=document.cookie.length;
      }
       return unescape(document.cookie.substring(start,end))
    }  
     return ''
  }
}        
let name=getCookie('name')
console.log(name);

      使用jequery:

//设置cookie
$.cookie('name','nihao')    //存储name='nihao'到cookie中
$.cookie('name','nihao',{expires:5,path:'/',secure:false,raw:false}) 
//有效期5天，有效路径为跟目录，secure:是否使用安全协议HTTPS,raw:读取和写入自动进行编码解码

//读取    
$.cookie('name')   //cookie存在，‘nihao’
$.cookie('password')     //cookie不存在，null

//删除
$cookie('name',null);

      注意：

　　　　1.不一样的浏览器存放cookie的位置不同，不能通用；另外cookie的存储以域名形式区分，不一样的域下存储的cookie是独立的（可设置cookie生效的域）。

　　　　2.一个域名下存放的cookie的个数是有限制的，不一样的浏览器存放的个数不同,通常为20个。每一个cookie的内容大小也是有限制的，不一样浏览器不一样，通常为4kb

　　　　3.cookie也能够设置过时的时间，默认是会话结束的时候，当时间到期，自动销毁

三，localStorage与sessionStorage

        在HTML5中新加了一个特性localStorage。这个特性主要用来作本地存储，解决了cookie存储的空间不足问题（cookie存储空间为4k），localStorage通常存储空间为5M大小，不一样浏览器有所不一样。webStorage还包括sessionStorage,二者都是调用Storage对象设置，获取，和删除进行控制存储的数据。二者存储的数据只能是字符串类型的键值对。

//localStorage,sessionStorage
  console.log(window.localStorage);
  console.log(window.sessionStorage);
  //写入
  localStorage.setItem('username', 'chenke')
  sessionStorage.setItem('password', '123456')
  //读取
  const username = localStorage.getItem('username')
  const password = sessionStorage.getItem('password')
  console.log('username=', username);
  console.log('password=', password);
  //删除
  localStorage.removeItem('username');
  sessionStorage.removeItem('password');
  console.log(localStorage.getItem('username'), '---', sessionStorage.getItem('password'));

  //删除全部key/value
  localStorage.clear();
  sessionStorage.clear();

注意：

 　   1.localStorage永久存储，在浏览器关闭后，从新打开后数据任然存在，须要手动删除，否则一直存在(若是想设置存储时间能够自行封装类处理)。

　　2.sessionStorage：在浏览器页面会话期间可用（包含页面从新加载和恢复），会话结束就被删除（统一窗口也就统一浏览器标签页下，即页面关闭自动销毁）

　　3.cookie的数据会在每一次发送http请求的时候，同时发送给服务器。而localStorage, sessionStorarge不会。

　　4.IE8以上版本才支持localStorage这个属性

　　5.通常咱们将JSON数据存入到localStorage中，而localStorage接收的是字符串，故写入的时候能够用JSON.stringfy()方法将JSON转换为JSON字符串。读取的时候能够用JSON.parse()方法，将JSON字符串转化为JSON对象。