HTML5 WebStorage
2012-05-06 22:31
351 查看
HTML5 中引入了WebStorage的概念,可以让客户端本地保存数据,它接触了传统用cookie存放数据的局限性(只有4KB)
WebStorage分两种:
(1)sessionStorage,这种存储是放在session对象中,一旦浏览器关闭就没了,是临时保存。
(2)localStorage,这种存储对象是放在硬盘上的,所以就算浏览器关闭还有,是永久保存。
我写了一个例子程序来演示这两种情况的区别:
这个页面就是2组组件,第一组组件用于演示sessionStorage,第二组组件用于演示localStorage:
js代码中利用了HTML5中与sessionStorage,localStorage相关的API进行数据的存储和读取。
初始状态,应该是:
我在sessionStorage中放入"Charles 是帅哥"字符串,通过输入这个字符串然后点击“保存sessionStorage数据”按钮,同时我在localStorage中放入"Jessica 是美女"字符串,通过输入字符串并且点击“保存localStorage"按钮,如图:
下面,演示从storage中获取已经保存的数据:
(a)保持浏览器不关闭状态
分别点击“读取sessionStorage数据”和“读取localStorage数据”按钮,如图:
这里可以看出,在浏览器不关闭的情况下,也就是session没有失效状态下,sessionStorage(临时存储)和localStorage(永久存储)的内容都被正确的读取了
(b)重启浏览器
我们重启浏览器,然后分别点击“读取sessionStorage数据”和“读取localStorage数据”按钮,如图:
这里可以看到,sessionStorage(临时存储)上的数据无法被读出来,但是localStorage(永久存储)上的数据可以被读出来
WebStorage分两种:
(1)sessionStorage,这种存储是放在session对象中,一旦浏览器关闭就没了,是临时保存。
(2)localStorage,这种存储对象是放在硬盘上的,所以就算浏览器关闭还有,是永久保存。
我写了一个例子程序来演示这两种情况的区别:
这个页面就是2组组件,第一组组件用于演示sessionStorage,第二组组件用于演示localStorage:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Web Storage Demo</title> <script type="text/javascript" src="js/storage1.js" ></script> </head> <body> <h1>Web Storage 示例</h1> <h3>sessionStorage的存取例子</h3> <p id="sessionStorageMessage" >这里会显示sessionStorage的内容</p> <input type='text' id="sessionStorageInput"><br> <input type="button" value="保存sessionStorage数据" onclick="saveSessionStorage('sessionStorageInput');"><br> <input type="button" value="读取sessionStorage数据" onclick="loadSessionStorage('sessionStorageMessage');"><br> <h3>localStorage的存取例子</h3> <p id="localStorageMessage" >这里会显示localStorage的内容</p> <input type='text' id="localStorageInput"><br> <input type="button" value="保存localStorage数据" onclick="saveLocalStorage('localStorageInput');"><br> <input type="button" value="读取localStorage数据" onclick="loadLocalStorage('localStorageMessage');"><br> </body>
js代码中利用了HTML5中与sessionStorage,localStorage相关的API进行数据的存储和读取。
/** * This file is confidential by Charles.Wang * Copyright belongs to Charles.wang * You can make contact with Charles.Wang (charles_wang888@126.com) */ //sessionStorage 示例 (将数据保存在session对象),当浏览器关闭就没了 function saveSessionStorage(id){ //取得用户输入的<input>的值 var target = document.getElementById(id); var str = target.value; //用sessionStorage.setItem(key,value)来保存数据 sessionStorage.setItem("message",str); } function loadSessionStorage(id){ var target= document.getElementById(id); //用sessionStorage.getItem(key) 来获取数据 var msg=sessionStorage.getItem("message"); target.innerHTML=msg; } //localStorage示例(将数据库保存在硬盘上),当浏览器关闭了数据依然存在 function saveLocalStorage(id){ var target = document.getElementById(id); var str = target.value; localStorage.setItem("message",str); } function loadLocalStorage(id){ var target= document.getElementById(id); var msg=localStorage.getItem("message"); target.innerHTML=msg; }
初始状态,应该是:
我在sessionStorage中放入"Charles 是帅哥"字符串,通过输入这个字符串然后点击“保存sessionStorage数据”按钮,同时我在localStorage中放入"Jessica 是美女"字符串,通过输入字符串并且点击“保存localStorage"按钮,如图:
下面,演示从storage中获取已经保存的数据:
(a)保持浏览器不关闭状态
分别点击“读取sessionStorage数据”和“读取localStorage数据”按钮,如图:
这里可以看出,在浏览器不关闭的情况下,也就是session没有失效状态下,sessionStorage(临时存储)和localStorage(永久存储)的内容都被正确的读取了
(b)重启浏览器
我们重启浏览器,然后分别点击“读取sessionStorage数据”和“读取localStorage数据”按钮,如图:
这里可以看到,sessionStorage(临时存储)上的数据无法被读出来,但是localStorage(永久存储)上的数据可以被读出来
相关文章推荐
- HTML5 WebStorage
- html5webstorage
- HTML5 WebStorage(HTML5本地存储技术)
- html5本地存储webstorage
- html5 webStorage:localStorage sessionStorage
- HTML5 WebStorage(HTML5本地存储技术)
- 大熊君学习html5系列之------WebStorage(客户端轻量级存储方案)
- 大熊君学习html5系列之------WebStorage(客户端轻量级存储方案)
- HTML5学习总结-07 WebStorage 本地存储
- html5 WebStorage本地存储
- HTML5之WebStorage
- HTML5 WebStorage
- WebSocket/WebWorker/WebStorage(HTML5的一些新特性)
- webStorage是html5中用于本地化存储的一种方式
- html5本地存储-WebStorage
- html5 WebStorage本地存储
- HTML5 WebStorage
- HTML5 webStorage
- HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体
- ↗☻【HTML5秘籍 #BOOK#】第4章 Web表单