localStorage 和 sessionStorage的区别

Posted leijee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了localStorage 和 sessionStorage的区别相关的知识,希望对你有一定的参考价值。

存储对象:

  在主流浏览器中,添加了html5  Web Storage API 的接口,storage是一个存储对象,它包括会话存储(session storage)或本地存储(local storage),它们分别有添加、修改或删除存储数据项的功能。

如果我们想要操作一个会话存储(session storage),可以使用 Window.localStorage对象,操作本地存储(local storage),可以使用  Window.sessionStorage对象

localStorage介绍:

  特征:

  ( 1 ).除非手动清除,否则永久保存在浏览器

   ( 1 ).存储大小一般为5MB

  (3).只存在于客户端(浏览器)中,不参与和服务器的通信

  (4).api使用简单,可以直接拿来使用,也可自己封装来对Object和Array有更好的支持

  (5).相同浏览器的不同页面间可以共享相同的 localStorage

  (6).不同浏览器无法共享localStorage或sessionStorage中的信息

  api方法介绍:

 

  localstorage.setItem(key,value)     //该方法接受键,值两个参数,如果键存在,就更新值

  localstorage.getItem(key)              //该方法接受一个参数值key,返回对应的value值

  localstorage.key(index)            //该方法一个number值,返回对应下标的key

  localstorage.removeItem(key)       //该方法接受一个参数值key,把当前key,value从localstorage中删除

  localstorage.clear()              //该方法 清除对象中所有的key,value

  对localStorage进行封装,可以兼容ie低版本浏览器(通过cookie来做兼容):

var local_storage = {};
local_storage = {
if(!window.localStorage){//当浏览器不支持localstorage的时候,采用cookie来代替localstorage
  return{
    getItem: function (sKey) {
       if(!sKey || !this.hasOwnProperty(sKey)) { return null; }
            return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
       },
       key: function (nKeyId) {
            return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
       },
       setItem: function (sKey, sValue) {
            if(!sKey) { return; }
            document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
            this.length = document.cookie.match(/\=/g).length;
       },
       length: (function(){
            return (document.cookie.match(/\=/g) || window.localStorage).length;
       })(),
       removeItem: function (sKey) {
            if (!sKey || !this.hasOwnProperty(sKey)) { return; }
            document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
            this.length--;
       },
       hasOwnProperty: function (sKey) {
            return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
       }
   };
}else{ return { setItem:function(key,value){ window.localStorage.setItem(key,value); }, getItem:function(key){ console.log(key); return window.localStorage.getItem(key); }, removeItem:function(key){ window.localStorage.removeItem(key); }, removeAll:function(){ window.localStorage.clear(); }, length:(function(){ return window.localStorage.length; })() }
}
}

 

sessionStorage介绍:

   特征:

  (1).仅在当前会话下有效,浏览器被关闭或当前页面被关闭的情况下清除

  (2).存储大小一般为5MB

  (3).只存在于客户端(浏览器)中,不参与和服务器的通信

  (4).api使用简单,可以直接拿来使用,也可自己封装来对Object和Array有更好的支持

  (5).不同页面或标签页间无法共享sessionStorage的信息

  (6).不同浏览器无法共享localStorage或sessionStorage中的信息

  api方法介绍:

  sessionStorage.setItem(key,value)     //该方法接受键,值两个参数,如果键存在,就更新值

  sessionStorage.getItem(key)              //该方法接受一个参数值key,返回对应的value值

  sessionStorage.key(index)            //该方法一个number值,返回对应下标的key

  sessionStorage.removeItem(key)       //该方法接受一个参数值key,把当前key,value从sessionStorage中删除

  sessionStorage.clear()              //该方法 清除对象中所有的key,value

  对sessionStorage进行封装,可以兼容ie低版本浏览器(通过cookie来做兼容):

var session_storage = {};
session_storage = {
 if(!window.localStorage){//当浏览器不支持localstorage的时候,采用cookie来代替localstorage
    return{

      getItem: function (sKey) {
        if(!sKey || !this.hasOwnProperty(sKey)) { return null; }
        return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
      },
      key: function (nKeyId) {
        return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
      },
      setItem: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
        this.length = document.cookie.match(/\=/g).length;
      },
      length: (function(){
        return (document.cookie.match(/\=/g) || window.sessionStorage).length;
      })(),
      removeItem: function (sKey) {
        if (!sKey || !this.hasOwnProperty(sKey)) { return; }
        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
        this.length--;
      },
      hasOwnProperty: function (sKey) {
        return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
      }
  };

 }else{
    return {
     setItem:function(key,value){

        window.sessionStorage.setItem(key,value);
      },
      getItem:function(key){
        console.log(key);
        return window.sessionStorage.getItem(key);
      },
      removeItem:function(key){
        window.sessionStorage.removeItem(key);
      },
      removeAll:function(){
        window.sessionStorage.clear();
      },
      length:(function(){
        return window.sessionStorage.length;
      })()

    }
  }
}

参考资料:

  https://developer.mozilla.org/zh-CN/docs/Web/API/Storage

以上是关于localStorage 和 sessionStorage的区别的主要内容,如果未能解决你的问题,请参考以下文章

cache 缓存的处理

在 Auth0 中授权后访问令牌

浏览器存储(webStorage)常用API以及简单使用

sessionStorage和localStorage的使用

localStorage和sessionStorage使用

localStorage和sessionStorage