摘要:存储目录定义生命周期语法存储大小注意点定义浏览器提供的,可以在当前域名下存储信息,只能存储生命周期是关闭当前页就清楚了,一直都在,关闭浏览器也会存在语法存储王五获取清除存储大小左右测试当前浏览器存储大小注意点存储的时候要是,不要用数组或者
sessionStorage ,localStorage 存储 目录
定义
生命周期
语法
存储大小
注意点
定义sessionStorage ,localStorage 浏览器提供的api,
可以在当前域名下存储信息,只能存储 string
sessionStorage 是关闭当前 tab页 就清楚了,localStorage 一直都在,关闭浏览器也会存在
语法存储
sessionStorage.setItem(key,value);
sessionStorage.setItem("userName","王五");
获取
var result = sessionStorage.getItem(key);
清除
sessionStorage.clear();
测试 当前浏览器存储大小 http://dev-test.nemikor.com/w...
注意点存储的时候 value 要是 string ,不要用数组 或者 对象
数组 // 错误处理方式 sessionStorage.setItem("a",[1,2,3,4,5]) sessionStorage.getItem("a") // "1,2,3,4,5" 这样处理的话,返回成了一个 string,得自己在转换成 数组 // 正确处理方式 sessionStorage.setItem("a",JSON.stringify([1,2,3,4,5])) JSON.parse(sessionStorage.getItem("a") ) // [1,2,3,4]; 对象 // 错误处理方式 sessionStorage.setItem("a",{id:"134",name:"33"}) sessionStorage.getItem("a") // "[object Object]" ,返回的这种数据都没得办法处理 // 正确处理方式 sessionStorage.setItem("a",JSON.stringify({id:"134",name:"33"})) JSON.parse(sessionStorage.getItem("a") ); // {id:"134",name:"33"}常见使用方式
sessionStorage 可以存储些用户信息,在浏览器关闭前不怎么改变的 比方下拉框
getSelectData("userType",function(data){ console.log(data); }); function getSelectData(key,callback){ var storeMap = {}; var key_url = { "user": "api/user", "orderStatus":"api/order/status", "userType": "api/user/type" } var result = getStore(key); if(result){ callback(result); return ; } $.get(key_url[key],).done(function(data){ setStore(key,data); callback(data); }); function setStore(key,value){ sessionStorage.setItem(key,JSON.stringify(value)) } function getStore(key){ var result = sessionStorage.getItem(key); if(!result){ return null; } return JSON.parse(result) } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96159.html
摘要:如图图顾名思义,,是级别的存储。如笔者写的一篇浅析文章聊一聊百度移动端首页前端速度那些事儿读者们可以尝试使用。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):https://segmentfault.com/blog/frontenddriver 在web开发越来越复杂的今天,前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。...
摘要:发布自的博客,欢迎大家转载,但是要注意注明出处介绍在中,引入了两个新的前端存储特性这两者非常相似,都是用来在前端保存一定量的数据,称为前端存储,但是这两者仍然存在一定区别生命周期的生命周期是永久的,即使关闭页面浏览器,其中的内容也不会消失, 发布自Kindem的博客,欢迎大家转载,但是要注意注明出处 localStorage 介绍 在HTML5中,引入了两个新的前端存储特性: loc...
摘要:移动端缓存失效是我印象最深的一个之一,为啥呢,因为这个问题导致我加班到很晚。的生命周期是仅在当前会话下有效。引入了一个浏览器窗口的概念,是在同源的窗口中始终存在的数据。无bug,不程序:作为程序员的我,不是修bug就是在写bug的路上。 移动端sessionStorage缓存失效是我印象最深的一个bug之一,为啥呢,因为这个问题导致我加班到很晚。在现在看来就是一个简单的概念问题。在我刚工作...
阅读 3512·2021-11-15 11:38
阅读 824·2021-11-08 13:27
阅读 2235·2021-07-29 14:50
阅读 2969·2019-08-29 13:06
阅读 838·2019-08-29 11:22
阅读 2408·2019-08-29 11:04
阅读 3499·2019-08-28 18:23
阅读 890·2019-08-26 13:46