极乐门资源网 Design By www.ioogu.com

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 本地存储的切图

详解JavaScript中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()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时就会被触发,这其中包含许多有用的属性:

"htmlcode">

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使用方式一致

"color: #ff0000">localStorage提供了几个方法:

1、存储:localStorage.setItem(key,value)

如果key存在时,更新value

2、获取:localStorage.getItem(key)

如果key不存在返回null

3、删除:localStorage.removeItem(key)

一旦删除,key对应的数据将会全部删除

4、全部清除:localStorage.clear()

某些时候使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据

5、遍历localStorage存储的key

.length 数据总量,例:localStorage.length
.key(index) 获取key,例:var key=localStorage.key(index);

6、存储JSON格式数据

JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象,返回解析后的对象

备注:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。

标签:
js_localstorage使用,localstorage使用,localstorage使用方法

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“详解JavaScript中localStorage使用要点”

暂无详解JavaScript中localStorage使用要点的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?