• 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

  • 相关阅读:
    前端开发网址
    Iconfot阿里妈妈-css高级应用
    手机端的META你知道多少?
    24个 HTML5 & CSS3 下拉菜单效果及制作教程
    css :clip rect 正确的使用方法
    layui :iframe 与 layer 的位置问题
    时间戳转现实时间的方法
    关于 iframe 的小问题若干
    使用 forever 启动 vue 需要注意的问题
    var 的一个坑,以及 let
  • 原文地址:https://www.cnblogs.com/leijee/p/7506301.html
Copyright © 2020-2023  润新知