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

原文链接： http://www.cnblogs.com/ckafter/p/10522774.html

一，关于浏览器本地存储

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

　　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对象。

转载于:https://www.cnblogs.com/ckafter/p/10522774.html

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

猜你喜欢