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的
所以建议, 为兼容浏览器或者自己写兼容处理函数,或者干脆不用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 的数据存储
如果觉得本文不错,请点击右下方【推荐】!
</div>