js基础篇——localStorage使用要点

2023-08-18 10:28:04

　　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 的数据存储

　　如果觉得本文不错，请点击右下方【推荐】！

码农公寓

相关文章