js基础篇——localStorage使用要点
localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难、容量有限的问题。localStorage有以下几个特点
1.localStorage是一个普通对象,任何对象的操作都适用。
2.localStorage对象的属性值只能是字符串。
这个需要特别注意了,假设我们要保存一个对象到localStorage中,可以使用拼接的方式。如
var obj = {"na=me": "chua",age: 9 }//拼接到localStorage var str = ""; for(var i in obj){str += encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]) + ";" } str = str.substring(0,str.length - 1); localStorage.testObj = str;//解析出来 var strA = localStorage.testObj.split(";"); var newObj = {}; for(var i = 0; i < strA.length; i++){var tmp = strA[i].split("=");newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]); }
当然也可以借助JSON类,将对象转换成字符串保存,然后在取出来的时候将json字符串转换成真正可用的json对象格式
3.localStorage支持的默认空间大小为5M,现代浏览器支持良好
借用xiaowei0705的HTML5 LocalStorage 本地存储的切图
需要注意的是在手机上使用的时候需要后台开辟内存空间支持才行。
"QUOTA_EXCEEDED_ERR”"是一个异常,如果你使用的存储容量超过了限度(5M)就会报这个异常
4.localStorage本身带有方法有
添加键值对:localStorage.setItem(key,value)
获取键值:localStorage.getItem(key)
删除键值对:localStorage.removeItem(key)。
清除所有键值对:localStorage.clear()。
获取localStorage的属性名称(键名称):localStorage.key(index)。
还有一个和普通对象不一样的属性length:
获取localStorage中保存的键值对的数量:localStorage.length。
下面这个例子用来获取localStorage的键值对
for(var i=0;i<localStorage.length;i++){console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));}
本着相信原生方法的原则应尽量使用原生的方法来操作localStorage。但是在iPhone/iPad上有时调用setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误。解决方法是在setItem之前先removeItem()。所以从这个兼容问题来看,貌似使用对象添加/删除键值对更方便一些,兼容也更强一些。
5.localStorage事件
localStorage的storage事件,在存储事件的处理函数中是不能取消这个存储动作的。
存储事件只是浏览器在localStorage数据变化发生之后给你的一个通知。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是空的,你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时就会被触发,这其中包含许多有用的属性:
- storageArea: 表示存储类型(Session或Local)
- key:发生改变项的key
- oldValue: key的原值
- newValue: key的新值
- url*: key改变发生的URL
注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性
PS:在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题,chrome修改localStorage能触发本页面的storage事件,Firefox 自身页面修改storage后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些.实例推荐PrimeTechBlog的初试WebStorage之localstorage
所以建议,为兼容浏览器或者自己写兼容处理函数,或者干脆不用storage事件。
实例
if (window.addEventListener) {window.addEventListener("storage", handle_storage, false); } else {window.attachEvent("onstorage", handle_storage); }; function handle_storage(e) {if (!e) { e = window.event; }//响应代码部分 ... }
一些小点:
localStorage要通过域名访问的方式才能起作用
如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。
localStorage使用方式一致
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
转载于:https://www.cnblogs.com/mei123/p/8550320.html
js基础篇——localStorage使用要点相关推荐
- JS基础篇--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...
- ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇(二)JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
- 前端面试题汇总(JS 基础篇)
前端面试题汇总(JS 基础篇)** 1.javascript 的 typeof 返回哪些数据类型** object number function boolean underfind stringty ...
- cytoscape.js基础篇
cytoscape.js基础篇 cytoscape.js 包引用 版本信息 Citation Funding 基础篇 cytoscape.js变量描述 位置 Elements JSON 节点属性说明 ...
- (一)JS 基础篇—基础知识总结
⛺️ 欢迎大家拜访我的:个人博客 ⛽️ 前端加油站之[JavaScript]⛽️ 内容 地址 (一)JS 基础篇-基础知识总结 ⛳️ [快来点点我 ~] (二)JS 基础篇-函数与作用域 ⛳️ [快来 ...
- 前端面试题目汇总摘录(JS 基础篇)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.01更新)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- 前端工程化----Node.js基础篇
文章目录 1.认识Node.js Node.js是什么 Node.js应用场景 2.Node.js安装和版本管理 Node.js安装 Node.js版本工具 3.Node.js执行文件 4.Node. ...
- 前端学习笔记(CSS、JS基础篇)
CSS篇 注意:css注释使用/ /,而不是<!-- -->或者//,否则很容易导致不明错误!!! div padding:内边距.盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用 ...
最新文章
- asp.net 2.0中设定默认焦点按钮
- LPC单片机IO口默认状态、复位状态、未初始化时输出高电平处理
- linux操作普通文件夹,Linux学习--2.文件管理的基本命令
- 怎么防爬虫爬取信息_scrapy爬取51job职位信息(针对新的反爬虫机制)!
- python 调用mysql_Python中直接在MySQL执行SQL命令
- 【每日一题】7月14日题目精讲—压缩
- h5 神策埋点_咕咚技术总监唐平麟:神策使我们的数据平台成本降低约 75%,迭代效率提升 2~3 倍...
- Robin负载均衡策略存在问题及CSE解决方案
- mysql relay log参数汇总
- GD32E230开发初体验
- 盛大剥离新业务:陈大年控股
- python zip压缩文件下载及解压
- anker2017拆_Anker的Eufy Genie与Amazon Echo Dot:值得吗?
- enumerate使用
- win10问题:无任何操作,2分钟后电脑就自动休眠
- 【http】微信网站使用的是http80端口或者https443端口访问
- jvarkit包问题反馈:构建成功,部分方法测试失败第4类错误分析
- 智能电子校徽方案/案列/APP/软件/硬件/项目
- 如何有效的区分小公司和创业公司(一):小公司的特点
- 广联达无领导小组面试题 新鲜出炉