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

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

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

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

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

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

localStorage 方法

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

例：

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

localStorage.lastname="Smith";

document.write("Last name: " + localStorage.lastname);

</script>

</body>

</html>

计数器：

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

if (localStorage.pagecount)

    {

    localStorage.pagecount=Number(localStorage.pagecount) +1;

    }

else

    {

    localStorage.pagecount=1;

    }

document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>

</body>

</html>

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

例：

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

</body>

</html>

计数器：

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

if (sessionStorage.pagecount)

    {

    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

    }

else

    {

    sessionStorage.pagecount=1;

    }

document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>

</body>

</html>

【HTML5】Web存储的更多相关文章

  1. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  2. HTML5 web 存储

    简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...

  3. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  4. 面试之HTML5 Web存储

    前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...

  5. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

  6. 有趣的HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...

  7. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...

  8. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  9. HTML5 web存储

    既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...

  10. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

随机推荐

  1. 数字、大写字母、小写字母，谁的ASCII码最大？

    常见ASCII码的大小规则:0~9<A~Z<a~z几个常见字母的ASCII码大小: “A”为65:“a”为97:“0”为 48.

  2. JAVA 利用JNI加密class文件/自定义ClassLoader 类

    利用 JNI 对bytecode 加密.不影响java程序员的正常开发.09年的时候写的,现在拿出来晒晒————————————————————————————混淆才是王道,如果混淆再加密就更酷了.. ...

  3. Source Insight 基本使用(1)-使用Source Insight查看Android Framework 源码

    一.下载framework源码: google已经把framework源码托管在了gitHub上: https://github.com/android/platform_frameworks_bas ...

  4. linux的vnc- rdesktop远程登录windows桌面

    使用vnc来实现任何平台之间(windows, linux, mac等)的远程桌面互访 vnc:virtual network computing 分 vnc server和 vnc client 在 ...

  5. 马化腾:办公用QQ休闲用微信[Dream Catchers论坛]

    近日,香港大学举办以创新创业为主题的Dream Catchers论坛.其中腾讯董事局主席马化腾在下午两点四十五分在李兆基会议中心做了专题演讲,分享了自己的创业经历并回答了媒体人张力奋有关产品.整整对手 ...

  6. ajax 之js读取xml的多浏览器兼容

    主要是分为两大类:IE.其它浏览器 IE8以下只支持这种 InputVoltage.innerText = xmlDoc.getElementsByTagName(id)[0].text, 其它浏览器 ...

  7. FOJ 2161 Jason and Number

    暴力模拟找规律: 552287 2014-04-23 21:08:48 Accepted 2161 Visual C++ 0 ms 192KB 347B Watermelon #include< ...

  8. 《转》.NET开源核心运行时，且行且珍惜

    转载自infoQ 背景 InfoQ中文站此前报道过,2014年11月12日,ASP.NET之父.微软云计算与企业级产品工程部执行副总裁Scott Guthrie,在Connect全球开发者在线会议上宣 ...

  9. Android 和iOS 创建本地通知

    1 Android 中的发送本地通知的逻辑如下 先实例化Notification.Builder,再用builder创建出具体的Notification,创建时要指定好启动用的PendingInten ...

  10. centos下编译安装mysql5.5/5.6

    2013年11月16日 19:39:13 centos 6 mysql 5.5.28 我只说些我出错的地方: cmake后删除的方法是 xargs rm < install_manifest.t ...