早期的网页数据存储只能依赖于cookies,但它存在着容量有限且很小,不便于复杂数据的管理等问题,此外,还需将cookies附带在每一次网络请求之中。HTML5的出现,极大地增加了开发人员的开发灵活度:
- Web Storage(Key-value 相对简单易用)
- Web SQL Database(用SQL访问本地数据库)
- Indexed DB(存取JSON数据的数据库)
- File system(存取文件)
- Application Cache(缓存网络资源)
Web Storage由两部分组成,sessionStorage和localStorage,sessionStorage用于本地存储一个会话 (session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久 化的本地存储,仅仅是会话级别的存储;localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。其他特性还包括:
- localStorage
- 以域名为单位进行数据划分
- 同域下的所有页面一起共享这些数据
- 对数据的改动会导致同时共享这些数据的其他页面触发storage事件
- sessionStorage
- 以每个“顶级页面(top-level browsing context)”为单位
- 在所有同域的“子页面”中共享这些数据(对数据的改动会触发storage事件)
- 为所有同域的以下“顶级页面”拷贝这些数据(通过超链接新打开的页面、通过脚本新打开的页面)
HTML5 新增的Web Storage 有localStorage 和sessionStorage,
以前要在用户端浏览器储存资料,常会使用cookie,现在则多了Web Storage 可以选择。
cookie 和Web Storage 在应用的不同点
-
可储存的资料量大小不同
[cookie的容量]- 大约只能存4KB
- 依W3C的说明是依用户端决定( http://www.w3.org/TR/webstorage/#disk-space ),每个origin (注1)容量一般是5MB。
- 在wiki查到则是每个浏览器不太一样( http://en.wikipedia.org/wiki/Web_Storage ),Google Chrome:2.5MB, Mozilla Firefox、 Opera:5MB,Internet Explorer:10MB 。
-
注1:相同的origin,表示同一个domain(host) 和port。
Same Origin Policy说明:
http://www.w3.org/Security/wiki/Same_Origin_Policy
http://en.wikipedia.org/wiki/Same_origin_policy
-
cookie会随着HTTP header传用给伺服器,所以伺服器可以直接操作cookie。
但Web Storage则无法直接在伺服器端操作,若要在伺服器端读取Web Storage,则须另外传送。
Web Storage 使用说明
-
Web Storage 包含localStorage 和sessionStorage,操作方式基本上是一样的。
两者不一样的地方,在于:
储存在localStorage的资料,关闭浏览器依旧会存在。
储存在sessionStorage的资料,在关闭浏览器后,就不见了。 -
localStorage 使用范例
localStorage["test1"]='a'; //儲存資料,方法1 localStorage.test2='b'; //儲存資料,方法2 localStorage.setItem("test3","c"); //儲存資料,方法3 alert(localStorage["test1"]); //讀取資料,方法1 alert(localStorage.test2); //讀取資料,方法2 alert(localStorage.getItem("test3")); //讀取資料,方法3 localStorage.removeItem("test1"); //刪除key值為test1這筆資料 localStorage.clear(); //刪除localStorage裡所有資料
-
sessionStorage使用范例
sessionStorage["test1"]='a'; //儲存資料,方法1 sessionStorage.test2='b'; //儲存資料,方法2 sessionStorage.setItem("test3","c"); //儲存資料,方法3 alert(sessionStorage["test1"]); //讀取資料,方法1 alert(sessionStorage.test2); //讀取資料,方法2 alert(sessionStorage.getItem("test3")); //讀取資料,方法3 sessionStorage.removeItem("test1"); //刪除key值為test1這筆資料 sessionStorage.clear(); //刪除localStorage裡所有資料
Web Storage 的属性和方法
- length:回传有几笔资料。
- setItem(key,value):设定一笔资料。
-
getItem(key):由指定的key,取得该笔资料,若指定的key 不存在,回传null。
(若用localStorage["test1"]、localStorage.test1 的方式,遇不存在的key,会回传undefined)。 - removeItem(key):由指定的key,移除该笔资料。
- clear():清除所有资料。
- key(index) :由指定的index(索引),取得key的名称。
Web Storage 的事件(event) (当储存区的资料发生异动时,会触发storage事件)
- key:被改变的key 名称。
- oldValue:被改变的key 对应的原始资料。
- newValue:被改变的key 对应的新资料。
- url:被改变的key 原始网址。
- storageArea:被改变的Storage 物件。
- 注意事项:注册storage事件和触发storage事件的动作,须在两个页面
-
测试范例1:(用iframe 触发父视窗注册的storage 事件)
注册storage事件页面 (里面再用iframe带入另一个test.html页面)<script> function MyStorageHandler(e){ alert("key=" +e.key); alert("oldValue=" +e.oldValue); alert("newValue=" +e.newValue); alert("url=" +e.url); alert("storageArea=" +e.storageArea); } window.addEventListener('storage',MyStorageHandler,false); </script> <iframe src="test.html"></iframe>
点击此页的按钮,建立一个新的aa=123的值,即会触发storage事件<input type="button" value="button" onclick="sessionStorage.setItem('aa','123');">
-
测试范例2:(用两个分页开启同一个页面)
建立一个页面aa.html,内容如下<script> function MyStorageHandler(e){ alert('test'); } window.addEventListener('storage', MyStorageHandler, false); if(localStorage.length > 0){ localStorage.clear(); }else{ localStorage.setItem('aa', '123'); } </script>
都浏览aa.html 这一页(例:http://127.0.0.1/aa.html)
重新整理第一个分页时,会触发第二个分页的storage事件,
反之,重新整理第二个分页时,会触发第一个分页的storage事件。
以上是我在Firefox 和chrome 测试时的情况。
但在IE9 上测试时,却只要一个分页就可以触发storage 事件?
而且在IE9 上只要调用setItem(),不管值是否有改变,就会触发storage 事件
,不知是不是IE9 的bug?
浏览器查目前Web Storage 的值
-
Firefox:使用firebug,F12 -> 主控台(console) -> 输入localStorage 或sessionStorage -> 执行。
firebug官方说明https://getfirebug.com/wiki/index.php/DOM_Panel#localStorage - chrome:"Ctrl+Shift+I"(开发人员工具) -> Resources -> 即可看到Local Storage 和Session Storage 可以选择
原文:http://xyz.cinc.biz/2013/01/html5-web-storage.html
实例:
<input type='button' onclick='set_item()' value='存值' /> <input type='button' onclick='get_item()' value='取值' /> <input type='button' onclick='delete_item()' value='删除' /> <script> //localStorage 存值永久有效 function set_item() { var user = {}; user.name = 'Gideon Liang'; user.age = 32; user.home = 'USA'; localStorage.setItem('userinfo',JSON.stringify(user)); } //localStorage取值 function get_item(){ var data = JSON.parse(localStorage.getItem('userinfo')); alert("name:"+data.name+"\r age:"+data.age+"\r home:"+data.home); } //localStorage删除指定键对应的值 function delete_item(){ localStorage.removeItem('userinfo'); alert(localStorage.getItem('userinfo')); } </script>
相关推荐
从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...
angular-html5-storage Angular.jsHTML5 Web存储(ngHTML5Storage)安装 bower install angular-html5-storage --save用法创建服务包装器(可选) app .factory('myStorageService', ['ngHTML5Storage', function(ng...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
WebStorageCache 对HTML5 localStorage 和sessionStorage 进行了扩展,添加了超时时间,序列化方法。可以直接存储json对象,同时可以非常简单的进行超时时间的设置。 优化:WebStorageCache自动清除访问的过期...
使用local storage 我们使用localStorage对象来访问local storage,他返回Storage对象,Storage用来存储键值对的数据,他有下面一些属性和方法: clear():清楚存储的键值对数据; getItem():通过key获取value值; ...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
从第 2章起,分别围绕构建令人神往的富Web 应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
16.1 Web Storage 536 16.2 Indexed数据库API 545 16.3 离线应用 564 16.4 本章小结 571 第17章 文件支持与二进制数据 572 17.1 HTML 5增强的文件上传域 573 17.2 ArrayBuffer与TypedArray 578 17.3 Blob类 ...
安全存储网络Web应用程序的安全存储演示版安装npm install secure - storage - web -- save 或者yarn add secure - storage - web -- save用法在Web应用程序中在侧面index.html < script src = "node_modules/...
3.1.1 缓存技术WebStorage 17 3.1.2 跨域交互缓存处理需求 17 3.1.3 页面回退管理需求 17 3.2 缓存处理机制 18 3.2.1 跨域缓存处理 18 3.2.2页面回退管理 18 3.3 模块实现 19 3.3.1跨域缓存机制的主要实现 19 3.3.2....
使用Webstorage HTML5和Jquery保存所有数据输入字段 这个怎么运作: 将jquery添加到您的项目。 将saveIt.js javascript添加到您的项目中。 将类“ saveIt”分配给您希望浏览器记住的每个输入字段。 给该输入字段...
1.3.1 HTML文件的编写方法 5 1.3.2 文件开始标签<html> 7 1.3.3 文件头部标签<head> 7 1.3.4 文件标题标签<title> 7 1.3.5 文件主体标签<body> 7 1.3.6 编写文件的注意事项 8 ...
4.article元素的使用方法10:27 5.section元素11:16 6.aside元素06:06 7.nav元素07:46 8.time元素01:51 9.pubdate属性04:31 10.header元素合成13:11 11.hgroup元素合成05:43 12.footer元素07:04 13.address元素合成04...