详解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 相关文章推荐
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
图解JS原型和原型链实现原理
Sep 15 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
自动跳转中英文页面
2006/10/09 PHP
PHP date函数参数详解
2006/11/27 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python多线程并发及测试框架案例
2019/10/15 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python创建临时文件和文件夹
2020/08/05 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
介绍一下Make? 为什么使用make
2013/12/08 面试题
给男朋友的道歉信
2014/01/12 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python