JavaScript解密之旅----浏览器存储：cookie、sessionStorage和localStorage

常用的几种浏览器缓存方式和使用的总结

现在进行总结一下，对于cookie,localStorage,sessionStorage进行一个简单的比较。

对比差异

特性	cookie	localStorage	sessionStorge
储存大小	4k	5M(浏览器不同而不同)	5M (浏览器不同而不同)
存取方式	字符串	字符串(JSON转译)	字符串(JSON转译)
服务端通信	携带header中	不通信	不通信
生命周期	服务器生成，可设置过期时间	一直存在，除非清理空	浏览器关闭清空
应用场景	辨别用户身份、进行session跟	长久保存整个网站的数据	临时保存同一窗口(或标签页)的数据

详细介绍

• cookie
  1. cookie常用于前后点用户身份认证，标记用户。因为http是一种无状态协议（没有记忆），为了解决http记忆力的问题，用session去管理cookie。
  2. session在服务端会设置一个响应头Set-Cookie；客户端接收到，此后发送请求浏览器都会自动带上Cookie请求头。sessionc存放过多会无法扩张
  3. 将session提取出来，集中存放。
  4. 服务是不需要进行存储，服务可以通过解析token里面的信息来判断是否登陆。token 里面是可以携带cookie解析出来的信息的
• coolie—code

// sessionId通常存放在cookie当中   会话由浏览器控制 会话结束 session失效
  u.cookie = {
    
    }
  //设置cookie
  u.cookie.set = function(name, value, expiredays) {
    
    
   var expires = ''
   if (expiredays) {
    
    
       var exdate = new Date()
       exdate.setTime(exdate.getTime() + expiredays * (24 * 3600 * 1000))
       expires = ';expires=' + exdate.toUTCString()
   }
   document.cookie = name + '=' + escape(value) + expires
}
  //获取cookie
u.cookie.get = function(name) {
    
    
   var arr = document.cookie.split('; ')
   for (var i = 0; i < arr.length; i++) {
    
    
       var temp = arr[i].split('=')
       if (temp[0] === name) return unescape(temp[1])
   }
   return null
}
// 删除cookie
u.cookie.remove = function(name) {
    
    
   u.cookie.set(name, '', -1)
}

• localStorage 、sessionStroage
  1. 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
  2. 存储对象的方法:
     javascript localStorage.setItem('cartInfor',JSON.stringify(data));
  3. 取出本地存储对象的方法
     javascript JSON.parse(localStorage.getItem("cartInfor"))
• localStorage/sessionStroage–code
  兼容android,setItem() 支持存储对象方法

u.storage = {
    
    };
//获取localStorage对象，兼容android（android原生系统老系统不支持localstorage）
function uzStorage() {
    
    
    var ls = window.localStorage;
    var isAndroid = (/android/gi).test(window.navigator.appVersion);
    if (isAndroid) ls = os.localStorage();
    return ls;
}
// 设置本地储存
u.storage.set = function (key, value) {
    
    
    var v = value;
    if (typeof v === 'object') {
    
    
        v = JSON.stringify(v);
        v = 'obj-' + v;
    }
    var ls = uzStorage();
    if (ls) ls.setItem(key, v);
};
//获取本地储存
u.storage.get = function (key) {
    
    
    var ls = uzStorage();
    if (ls) {
    
    
        var v = ls.getItem(key);
        if (!v) return;
        if (v.indexOf('obj-') === 0) return JSON.parse(v.slice(4));
        else return v;
    }
};
//删除本地储存中的某些数据
u.storage.remove = function (key) {
    
    
    var ls = uzStorage();
    if (ls && key) ls.removeItem(key);
};
// 清空本地储存所有数据
u.storage.clear = function () {
    
    
    var ls = uzStorage();
    if (ls) ls.clear();
};

总结

对于cookie,sessionStorage等在前端框架中一般都有封装好的组件，像vue中的vue-ls ，js-cookie等，知识活学活用，知道原理之后更好的去优化提高自己的代码水平。