设为首页 加入收藏

TOP

HTML5 WebStorage
2014-11-24 12:53:55 来源: 作者: 【 】 浏览:0
Tags:HTML5 WebStorage

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(永久存储)上的数据可以被读出来


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇HTML5 利用json对象来存取复杂数据 下一篇HTML5 利用canvas API 展示阴影效..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·C语言中如何将结构体 (2025-12-24 22:20:09)
·纯C语言结构体成员变 (2025-12-24 22:20:06)
·C语言中,指针函数和 (2025-12-24 22:20:03)
·哈希表 - 菜鸟教程 (2025-12-24 20:18:55)
·MySQL存储引擎InnoDB (2025-12-24 20:18:53)