localStorage用法介绍

我心飞翔 分类:实例代码

localStorage主要用来替代cookie,解决cookie一些问题,特别是存储容量过小。

下面就简单介绍一下它的一些主要特点和用法,需要的朋友可以做一下参考。

localStorage主要特点如下:

(1).localStorage是一个普通对象,任何对象的操作都适用。

(2).localStorage对象的属性值只能是字符串。

假设我们要保存一个对象到localStorage中,可以使用拼接的方式。

代码如下:

var obj = {
  "na=me": "chua",
  age: 9
}
//拼接到localStorage
var str = "";
for(var prop in obj){
  str += encodeURIComponent(prop) + "=" + encodeURIComponent(obj[prop]) + ";"
}
str = str.substring(0,str.length - 1);
localStorage.testObj = str;
//解析出来
var strA = localStorage.testObj.split(";");
var newObj = {};
for(var index= 0; index< strA.length; index++){
  var tmp = strA[index].split("=");
  newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}

当然也可以借助JSON类,将对象转换成字符串保存,然后在取出来的时候将json字符串转换成真正可用的json对象格式。

(3).localStorage支持的默认空间大小为5M,现代浏览器支持良好。

前端教程

特别说明:在手机上使用的时候需要后台开辟内存空间支持才行。

"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 index = 0; index < localStorage.length; index++) {
  console.log(localStorage.key(index) + " : " + localStorage.getItem(localStorage.key(index)));
}

本着相信原生方法的原则应尽量使用原生的方法来操作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属性。

在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要通过域名访问的方式才能起作用。

localStorage用法介绍,这样的场景在实际项目中还是用的比较多的,关于localStorage用法介绍就介绍到这了。

localStorage用法介绍属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容