H5本地存储:sessionStorage和localStorage
作者:心叶
时间:2018-05-01 18:30
H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下:
1.sessionStorage:保存的是一个会话的数据,也就是说只在一次会话中有效,关闭就会销毁数据,不是持久的本地数据存储,只是一个会话的存储;
2.localStorage:本地数据持久化存储,在操作上和第一种没有什么区别,只是存储时间上不同。
第一步:基本操作。
1.把value存储到key字段:.setItem( key, value)。
sessionStorage.setItem("key", "value");
localStorage.setItem("key", "value");
2.获取指定key本地存储的值:.getItem(key)。
var value=sessionStorage.getItem("key");
var value=localStorage.getItem("key");
3.删除指定key本地存储的值:.removeItem( key)。
sessionStorage.removeItem("key");
localStorage.removeItem("key");
4.清除所有的key/value:.clear()。
sessionStorage.clear();
localStorage.clear();
第二步:其它操作。
storage除了可以用上面说到的方法获取和存储数据,还可以和普通的对象一样,使用点操作和[]来控制数据(下面以localStorage为例子):
var storage = window.localStorage;
storage.info='通过点设置数据';
//通过[]获取数据
var infoValue=storage['info'];
可以通过storage的key()和length实现数据的遍历:
var storage = window.localStorage;
for (var i = 0, len = storage.length; i < len; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
第三步:storage事件(针对localStorage)。
localStorage提供了一个事件storage,当键值改变或者clear的时候,就可以触发storage事件(注册storage和改变值要在不跨域的情况下存在于二个页面),如下面的例子:
//页面A.html里面的js代码(为了简化代码,注册事件没有考虑兼容性)
window.addEventListener("storage", function (event) {
alert(event.newValue);
});
//页面B.html里面的js代码
localStorage.clear();
localStorage.setItem('key', 'value');
把页面A.html和B.html放正同一个域名下的HTTP服务器里,先打开A.html页面,再打开B.html页面,就可以看见效果了。
上面A.html注册事件的event对象一共有下面几个属性:
1.key:字符串类型,表示被修改,删除或添加的条目的key值;
2.oldValue:表示之前的值,如果是添加一个条目就返回null;
3.newValue:表示现在的新值,如果是添加一个条目就返回null;
4.url/uri:字符串类型,表示触发这个事件的页面地址。
最新文章
- class.c 添加中文注释(3)
- .net 开发---windows服务
- Step by Step 创建一个新的Dynamics CRM Organization
- Mysql复合索引
- 张艾迪(创始人):Be.Time+Cr.Idear的创新理念
- pc wap 判断浏览器ua属性
- 基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据
- css使 同一行内的 文字和图片 垂直居中对齐?
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- UVa 10253 (组合数 递推) Series-Parallel Networks
- Servlet课程0424(一) 通过实现Servlet接口来开发Servlet
- The maximum number of cell styles was exceeded. You can define up to 4000 styles
- BZOJ_1014_[JSOI2008]_火星人prefix_(Splay+LCP_Hash+二分)
- 学习java随笔第四篇:运算符
- HDU 1061 Rightmost Digit解决问题的方法
- bootstrap 响应式图片自适应图片大小
- 第七周PTA作业
- js中一个对象中遇到一个相同的key所对应的value值相加
- 来啊踩fastjson打印入参导致业务跑偏的坑
- 【XSY1515】【GDKOI2016】小学生数学题 组合数学