详解JavaScript中localStorage使用要点


Posted in Javascript onJanuary 13, 2016

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

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

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。

Javascript 相关文章推荐
button没写type=button会导致点击时提交
Mar 06 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 #Javascript
jquery悬浮提示框完整实例
Jan 13 #Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 #Javascript
jQuery简单操作cookie的插件实例
Jan 13 #Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 #Javascript
javascript中的作用域和闭包详解
Jan 13 #Javascript
JSON+Jquery省市区三级联动
Jan 13 #Javascript
You might like
一个php作的文本留言本的例子(三)
2006/10/09 PHP
PR值查询 | PageRank 查询
2006/12/20 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python 中 Meta Classes详解
2016/02/13 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python tkinter基本属性详解
2019/09/16 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python实现自动整理文件的脚本
2020/12/17 Python
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
校园安全教育广播稿
2014/02/17 职场文书
村抢险救灾方案
2014/05/09 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
软件售后服务承诺书
2014/05/21 职场文书
白鹤梁导游词
2015/02/06 职场文书
个人思想政治总结
2015/03/05 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
在Python 中将类对象序列化为JSON
2022/04/06 Python
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers