js 本地缓存localStorage和sessionStorage 用法和区别

逃离我推掉我的手 2022-11-26 12:00 186阅读 0赞

**定义和使用**  
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

sessionStorage 数据保存在当前会话中，该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

保存数据语法  
localStorage.setItem(“key”, “value”);  
sessionStorage .setItem(“key”, “value”);

读取数据语法：  
var lastname = localStorage.getItem(“key”);  
var lastname = sessionStorage .getItem(“key”);

删除数据语法：  
localStorage.removeItem(“key”);  
sessionStorage .removeItem(“key”);

下面写个方法把两个封装一起方便开发使用

var SaveData=function(){ };
     SaveData.prototype={ 
     /**保存数据到本地 * 参数 k * 参数 v * 参数 flag 为true时表示是sessionStorage保存，其他则为localStorage保存 */
        storageSaveData:function(k,v,flag){ 
            if(flag==true){ 
                sessionStorage.setItem(k,v);
                return true;
            }
            localStorage.setItem(k,v);
            return true;
        },
        /** * 获取本地数据 * 参数 k * 参数 flag */
        storageGetData:function(k,flag){ 
            if(flag==true){ 
                return sessionStorage.getItem(k);
            }
            return localStorage.getItem(k);
        },
    
        /** * 清除本地数据中的值 * 参数 flag * 参数 k * returns {boolean} */
        storageClearData:function(flag,k){ 
            if(flag==true){ 
                if(checkTool.validVar(k)){ 
                    sessionStorage.removeItem(k);
                }else{ 
                    sessionStorage.clear();
                }
                return true;
            }
    
            if(checkTool.validVar(k)){ 
                localStorage.removeItem(k);
            }else{ 
                localStorage.clear();
            }
            return true;
        },
    
    }
    
    var SaveData=new SaveData();

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 本地缓存localStorage和sessionStorage 用法和区别

定义和使用 localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 localStorage 用于长久保存整个

逃离我推掉我的手/ 2022年11月26日 12:00/ 0 赞/ 187 阅读

相关 sessionStorage和localStorage的用法

sessionStorage的存储，只存在于当前窗口可使用。例如：![窗口][20210602093204895.png] 这里有两个窗口，在哪个页面窗口使用了sess

梦里梦外;/ 2022年10月17日 05:55/ 0 赞/ 192 阅读

相关 sessionstorage 和 localstorage 的区别

简介在HTML 5 最开始时，本地存储有两种方式：`一种是web Storage`，`另一种是web SQL`。由于web SQL的实现是基于SQLite，它更倾向于D

灰太狼/ 2022年08月30日 15:53/ 0 赞/ 209 阅读

相关 localStorage和sessionStorage区别

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，

痛定思痛。/ 2022年06月10日 03:47/ 0 赞/ 222 阅读

相关 localStorage和sessionStorage用法

H5新增特性本地存储localStorage和sessionStorage，下面说一下具体的区别 localStorage：是能\长时间存储本地浏览器的数据，当一个标签页改

红太狼/ 2022年05月29日 11:39/ 0 赞/ 277 阅读

相关 LocalStorage和SessionStorage用法

web 本地存储（localStorage、sessionStorage）说明 > 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie

川长思鸟来/ 2022年05月24日 09:06/ 0 赞/ 286 阅读

相关 localStorage、sessionStorage的区别和用法

webstorage > webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。 localStorage

叁歲伎倆/ 2022年04月11日 02:43/ 0 赞/ 291 阅读

相关 localstorage和sessionstorage使用区别

什么时候用是根据他们各自的功能和需求来决定的。 localStorage可以长期存储,只要你不清理数据就会长期存在,比如用ajax加载的后台的菜单就可以在登录时储存起来

谁践踏了优雅/ 2022年02月20日 04:37/ 0 赞/ 297 阅读

相关 localStorage sessionStorage Cookie 区别和用法

原文: https://blog.csdn.net/shenxianhui1995/article/details/93010158 区别 localStorage:

迈不过友情╰/ 2021年12月17日 00:21/ 0 赞/ 319 阅读

相关 js页面缓存，localStorage和sessionStorage使用总结

localStorage、sessionStorage是Html5的特性,不支持及IE7下浏览器 localStorage和sessionSt...

测试账号/ 2021年01月19日 17:29/ 0 赞/ 743 阅读