Chinaunix首页 | 论坛 | 博客
  • 博客访问: 460691
  • 博文数量: 226
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2111
  • 用 户 组: 普通用户
  • 注册时间: 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文(226)

文章存档

2020年(2)

2019年(1)

2018年(3)

2017年(26)

2016年(57)

2015年(60)

2014年(77)

我的朋友

分类: Web开发

2014-11-03 15:47:02

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

1.localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

如何创建和访问 localStorage:
实例


下面的例子对用户访问页面的次数进行计数:
实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>localStorage 方法</title>
  6. <script type="text/javascript">
  7. if (localStorage.pagecount)
  8. {
  9.  localStorage.pagecount=Number(localStorage.pagecount) +1;
  10. }
  11. else
  12. {
  13.  localStorage.pagecount=1;
  14. }
  15. document.write("Visits: " + localStorage.pagecount + " time(s).");
  16. </script>
  17. </head>
  18. <body> 刷新页面会看到计数器在增长。 请关闭浏览器窗口,然后再试一次,计数器会继续计数。 </body>
  19. </html>

2.sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
如何创建并访问一个 sessionStorage:
实例

下面的例子对用户在当前 session 中访问页面的次数进行计数:
实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>sessionStorage 方法</title>
  6. <head>
  7. <script type="text/javascript">
  8. if (sessionStorage.pagecount)
  9. {
  10.  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  11. }
  12. else
  13. {
  14.  sessionStorage.pagecount=1;
  15. }
  16. document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
  17. </script>
  18. </head>
  19. <body>刷新页面会看到计数器在增长。请关闭浏览器窗口,然后再试一次,计数器已经重置了。</body>
  20. </html>

 

阅读(544) | 评论(0) | 转发(0) |
0

上一篇:HTML5

下一篇:HTML 5 应用程序缓存

给主人留下些什么吧!~~