HTML5 - Web存储使用详解(本地存储、会话存储)
2016-08-08 11:14
489 查看
1,Web存储介绍
HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种:
(1)本地存储,对应 localStorage 对象。用于长期保存网站的数据,并且站内任何页面都可以访问该数据。
(2)会话存储,对应 sessionStorage 对象。用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。
2,本地存储与会话存储的异同
(1)本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
(2)本地存储主要用来保存访客将来还能看到的数据。
(3)会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
3,Web存储容量限制
大多数浏览器都把本地存储限制为 5MB 以下。这个是和网站所在的域联系在一起的。
4,Web存储的使用样例
下面以本地存储(localStorage)为例,会话存储改成 sessionStorage 对象即可。
(1)文本数据的保存和读取
(2)数值的保存和读取
(3)日期的保存和读取
(4)自定义对象的保存和读取
对象的保存和读取可以通过JSON编码转换来实现。
JSON.stringify():把任何对象连同其数据转换为文本形似。
JSON.parse():把文本转换回对象。
(5)检测某个键的值是否为空,可以直接测试是否等于null
(6)删除数据项
(7)清除所有数据
(8)查找所有的数据项
不知道键名,可以使用 key() 方法从本地或者会话存储中取得所有的数据项。下面样例,点击按钮后就会列出所有本地存储中的数据。
5,响应存储变化
Web存储也为我们提供了在不同浏览器窗口间通信的机制。也就是说在本地存储或会话存储发生变化时,其他查看同一页面或者同一站点中其他页面的窗口就会触发 window.onStorage 事件。
这里说的存储变化,指的是向存储中添加新数据项,修改既有数据项,删除数据项或者清除所有数据。而对存储不产生任何影响的操作(用既有键名保存相同的值,或者清除原本就是空的存储空间),不会引发onStorage 事件。
下面同时打开两个页面,在页面1中修改数据项,页面2会响应 onStorage 事件,并报告结果。
--- page1.html ---
--- page2.html ---
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1066.html
HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种:
(1)本地存储,对应 localStorage 对象。用于长期保存网站的数据,并且站内任何页面都可以访问该数据。
(2)会话存储,对应 sessionStorage 对象。用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。
2,本地存储与会话存储的异同
(1)本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
(2)本地存储主要用来保存访客将来还能看到的数据。
(3)会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
3,Web存储容量限制
大多数浏览器都把本地存储限制为 5MB 以下。这个是和网站所在的域联系在一起的。
4,Web存储的使用样例
下面以本地存储(localStorage)为例,会话存储改成 sessionStorage 对象即可。
(1)文本数据的保存和读取
对象的保存和读取可以通过JSON编码转换来实现。
JSON.stringify():把任何对象连同其数据转换为文本形似。
JSON.parse():把文本转换回对象。
不知道键名,可以使用 key() 方法从本地或者会话存储中取得所有的数据项。下面样例,点击按钮后就会列出所有本地存储中的数据。
Web存储也为我们提供了在不同浏览器窗口间通信的机制。也就是说在本地存储或会话存储发生变化时,其他查看同一页面或者同一站点中其他页面的窗口就会触发 window.onStorage 事件。
这里说的存储变化,指的是向存储中添加新数据项,修改既有数据项,删除数据项或者清除所有数据。而对存储不产生任何影响的操作(用既有键名保存相同的值,或者清除原本就是空的存储空间),不会引发onStorage 事件。
下面同时打开两个页面,在页面1中修改数据项,页面2会响应 onStorage 事件,并报告结果。
--- page1.html ---
相关文章推荐
- android WebView html5 使用本地存储
- Html5 web本地存储实例详解
- 使用 HTML 5 开启移动 Web 应用程序的本地存储
- phonegap入门(二)-使用html5API存储信息到本地
- Android webview如何打开本地存储,提供给JS调用html5的lwindow.localStorage功能
- HTML5本地存储——IndexedDB(一:基本使用)
- HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- html5本地存储在手机web app中使用探讨
- HTML5本地存储——Web SQL Database
- Html5本地存储之Web SQL&nbsp…
- HTML5本地存储之Web Storage篇
- html5本地存储在手机web app中使用探讨
- html5 本地数据库(Web SQL Database)之事务处理函数 transaction和executeSQL 详解
- html5使用local storage存储的数据在本地是以何种形式保存的
- [HTML] 使用HTML5的本地存储localStorage
- HTML5特性 > 本地储存 >HTML5 Web本地存储
- html5 web本地存储将取代我们的cookie
- html5-web本地存储
- html5的本地存储localstorage和web databases