详解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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 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 采集程序中常用的函数
2009/12/09 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
vue图片上传组件使用详解
2019/12/23 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python做反被爬保护的方法
2019/07/01 Python
django如何通过类视图使用装饰器
2019/07/24 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
2014两会优秀的心得体会范文
2014/03/17 职场文书
单位承诺书格式
2014/05/21 职场文书
任命书范本大全
2014/06/06 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python