HTML5 高级系列:web Storage
前言
HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。
这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。
localStorage 的数据保存在本地硬件上,可以永久保存,可以手动调用api清除数据。sessionStorage 保存在 session 对象中,会在浏览器关闭时被清除。
web Storage 的大小在浏览器上是有限制的,不同浏览器大小会有区别,在主流浏览器中,大小约为 5M,用来存储普通数据其实已经足够。
原文作者:林鑫,作者博客:https://github.com/lin-xin/blog
## 用法
以 localStorage 为例,sessionStorage 用法一样:
setItem
保存数据:localStorage.setItem(key,value);
示例:
localStorage.setItem('name','Hello World');
当 key 相同时会覆盖之前的 value,用于修改数据。如果 value 为对象,需转为 json 字符串,否则你读取出来的将会是 [object Object]
getItem
读取数据:localStorage.getItem(key);
示例:
localStorage.getItem('name'); // Hello World
removeItem
删除单个数据:localStorage.removeItem(key);
示例:
localStorage.removeItem('name');
localStorage.getItem('name'); // null
删除 key 为 name 的数据后,loaclStorage 里已经获取不到该数据,则返回 null;
clear
删除所有数据:localStorage.clear();
示例:
localStorage.clear();
此时会把 localStorage 中的所有数据都删除。
key
得到某个索引的key:localStorage.key(index);
示例:
localStorage.setItem('name1','Hello World');
localStorage.setItem('name2','Hello Linxin');
localStorage.key(1); // name2
获取到索引为 1 的 key,即 name2。
构造函数
在实际项目中,可能需要多次对 localStorage 进行操作,我们可以通过一个构造函数来更好的操作。
示例:
var localEvent = function (item) {
this.get = function () {
return localStorage.getItem(item);
}
this.set = function (val) {
localStorage.setItem(item, val);
}
this.remove = function () {
localStorage.removeItem(item);
}
this.clear = function () {
localStorage.clear();
}
}
// 使用new字符把构造函数实例化出多个对象
var local1 = new localEvent('name1');
var local2 = new localEvent('name2');
local1.set('Hello World');
local2.set('Hello Linxin');
local1.get(); // Hello World
local2.get(); // Hello Linxin
这里只是简单的演示,像我们平时在项目中可能要把对象存储起来,就需要在代码里做些处理。
监听 storage 事件
可以通过监听 window 对象的 storage 事件并指定其事件处理函数,当页面中对 localStorage 或 sessionStorage 进行修改时,则会触发对应的处理函数。
window.addEventListener('storage',function(e){
console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})
触发事件的时间对象(e 参数值)有几个属性:
- key : 键值。
- oldValue : 被修改前的值。
- newValue : 被修改后的值。
- url : 页面url。
- storageArea : 被修改的 storage 对象。
注意:在谷歌浏览器中,需要在不同标签页中修改 storage 才会触发该事件,即 网页A 监听该事件,在 网页B 中修改 localStorage,则 网页A 会触发事件函数。但是在 IE 中,在同个网页修改 localStorage 都会触发该事件。
调试
谷歌浏览器自带调试工具(chrome devtools)非常好用,可以用来调试 localStorage 和 sessionStorage。打开浏览器按f12调出调试工具,可以看到 Application ,点击打开可以看到左边栏有 Storage,包括了 localStorage、sessionStorage、IndexedDB等,选中我们要调试的网站域名,可以看到右边有对应的 key 和 value,可以通过右键进行编辑或删除等。
兼容
IE8 以上就兼容,但是比较特别,需要在服务器上打开的才支持,直接双击打开文件的 file:// 是不兼容的。
到了 IE11 才支持 file:// 下打开的,其他浏览器的支持程度都很高,包括在手机上的兼容。具体兼容可查看:http://caniuse.com/#search=localstorage
下一篇将介绍本地存储的另一种方式 :HTML5 高级系列:indexedDB 数据库
更多文章:lin-xin/blog
HTML5 高级系列:web Storage的更多相关文章
- html5中的Web Storage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- HTML5本地存储 Web Storage
Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API sessionStorage 和 localStorage,二者的差异主要是数 ...
- html5本地存储web storage的简单使用
html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...
- HTML5笔记3——Web Storage和本地数据库
上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...
- HTML5 本地存储Web Storage简单了解
HTML5本地存储规范,定义了两个重要的API :Web Storage 和 本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...
- HTML5 Web Storage -- 让Cookies看起来如此古老
转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...
- [Selenium] Android HTML5 中 Web Storage
在 HTML5 中,Web Storage 这个新特性可让用户将数据存储在本地的浏览器中.在早期的浏览器中可通过 cookies 来完成这个任务,但 Web Storage 会更加安全和高效,且 We ...
随机推荐
- ssh简单配置
Port 2223Protocol 2HostKey /etc/ssh/ssh_host_rsa_keyHostKey /etc/ssh/ssh_host_dsa_keyKeyRegeneration ...
- short s1 = 1; s1 = s1 + 1;有错而short s1 = 1; s1 += 1正确。为何?
如果你认为表达式(x += i)只是表达式(x = x + i)的简写方式,这并不准确.这两个表达式都被称为赋值表达式.第二个表达式使用的是简单赋值操作符(=),而第一个表达式使用的是复合赋值操作符. ...
- Android WebView 上传各种文件(包括拍照 录像 录音 文件 音乐 等,用到图片或拍照的,可以参考下)
我也是从网上扒下来的,经过多次实验,找到了个好用的.网上能搜到最多的也就是这个解决方案,我英文不好,也没仔细研究,但大多数都是出自这: http://stackoverflow.com/questio ...
- android TransFormexecption 解决
近期编译的时候遇到这个问题.... > com.android.build.api.transform.Transformexception: java.util.zip.ZipExceptio ...
- 内存泄漏监测-LeakCanary
内存泄漏监测方法之使用LeakCanary LeakCanary出处: github:https://github.com/square/leakcanary/issues square 公司 这个公 ...
- JAVA基础5——与String相关的系列(1)
与String相关的系列 String, 是JAVA中常见的一个引用类型,且其具有一定的特殊性. String类型被设置为final型,即不可继承,也就不可修改其中的实现. String可以改变吗 S ...
- JS构造函数模式
构造函数是可以创建特定类型对象的函数,可以接受参数定义函数成员.如果之前做过java比较好理解,举个例子: function exampleFunction(arg1, arg2, arg3){ th ...
- VMWare安装Win10虚拟机
这两天突发奇想安了个win10虚拟机,在安装的过程中还遇到了不少麻烦,所以在此与大家分享下. 首先我们用VMWare12来安装,VMWare已经更新到14但是不太稳定,所以为了保险起见还是用12吧. ...
- SaltStack 部署案例 02
远程执行 salt '*' state.sls apache '*':代表所有主机 state.sls :是一个模块 apache : 状态 ,表示需要部署的内容,后缀.sls YAML:三板斧 1. ...
- 深入理解javascript函数进阶系列第二篇——函数柯里化
前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细 ...