HTML5 web存储，一个比cookie更好的本地存储方式。

什么是html5 Web存储

使用HTML5可以在本地存储用户的浏览器数据。

早些时候，本地存储使用的是cookies.但是Web存储需要更加安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它可以存储大量数据，而不影响网站的性能。

数据以键值对存在，web网页的数据只允许该网页访问使用。

localStorage 和sessionStorage

localStorage ：没有时间限制的数据存储

sessionStorage：针对一个seeeion的灵气存储

在使用web存储前，应检查浏览器是否支持localStorage 和sessionStorage

  1. if(typeof(Storage)!=="undefined")
  2.    {
  3.    // Yes! localStorage and sessionStorage support!
  4.    // Some code.....
  5.    }
  6.  else
  7.    {
  8.    // Sorry! No web storage support..
  9.    }

localStorage对象存储的灵气没有时间限制，不会过期。

  1. localStorage.lastname="Smith";
  2. document.getElementById("result").innerHTML="Last name: "
  3. + localStorage.lastname;

下面的实例记录了用户的点击次数

  1. if (localStorage.clickcount)
  2.   {
  3.   localStorage.clickcount=Number(localStorage.clickcount)+1;
  4.   }
  5. else
  6.   {
  7.   localStorage.clickcount=1;
  8.   }
  9.  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

sessionStorage 对象

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

如何创建并访问一个 sessionStorage：

  1. if(sessionStorage.clickcount)
  2. {
  3.       sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  4. }
  5. else
  6. {
  7.        sessionStorage.clickcount=1;
  8. }
  9. document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

来看效果：

连接点击19次后，看 sessionStorage

再开一个选项卡看sessionStorage: 从图中可以看出，打开新的选项卡后，单击次数显示是1，意味着上一次单击的数并没有被记住。

同样看localStorage，localStorage单击了7次，

再开一个选项卡看效果：单击一次localStorage按钮，记录数显示8，在上一次的基础上加1.

完整的demo:

  1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>LocalStorage</title>
  11.     <script src="~/Scripts/jquery-2.1.3.min.js"></script>
  12.     <script type="text/javascript">
  13.         function clickCounter() {
  14.             if (typeof (Storage) !== "undefined") {
  15.                 if (sessionStorage.clickcount) {
  16.                     sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
  17.                 }
  18.                 else {
  19.                     sessionStorage.clickcount = 1;
  20.                 }
  21.                 $('#result').html('');
  22.                 $('#result').append('<p>' + sessionStorage.clickcount + '</p>');
  23.             }
  24.             else {
  25.                 $('#result').text('抱歉您的浏览器不支持本地存储');
  26.             }
  27.         }
  28.         function clickCounter2() {
  29.             if (typeof (Storage) !== "undefined") {
  30.                 if (localStorage.clickcount) {
  31.                     localStorage.clickcount = Number(localStorage.clickcount) + 1;
  32.                 }
  33.                 else {
  34.                     localStorage.clickcount = 1;
  35.                 }
  36.                 $('#result2').html('');
  37.                 $('#result2').append('<p>' + localStorage.clickcount + '</p>');
  38.             }
  39.             else {
  40.                 $('#result2').text('抱歉您的浏览器不支持本地存储');
  41.             }
  42.         }
  43.     </script>
  44. </head>
  45. <body>
  46.     <div>
  47.         <p>
  48.             <button onclick="clickCounter()" type="button">sessionStorage查看单击次数</button>
  49.         </p>
  50.         <div id="result"></div>
  51.         <p>单击按钮查看统计次数</p>
  52.  
  53.     </div>
  54.  
  55.     <div>
  56.         <p>
  57.             <button onclick="clickCounter2()" type="button">localStorage查看单击次数</button>
  58.         </p>
  59.         <div id="result2"></div>
  60.         <p>单击按钮查看统计次数</p>
  61.  
  62.     </div>
  63. </body>
  64. </html>

本节完

HTML5学习笔记 Web存储的更多相关文章

  1. [html] 学习笔记--Web存储

    HTML5 提供了两种在客户端存储数据的新方法之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效 ...

  2. HTML5学习(八)----Web存储

    参考地址:http://www.w3school.com.cn/html5/html_5_webstorage.asp 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localS ...

  3. HTML5学习之Web存储

    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...

  4. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  5. SQL反模式学习笔记12 存储图片或其他多媒体大文件

    目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点:     1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...

  6. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  8. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  9. HTML5 学习笔记（三）——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

随机推荐

  1. 原生javascript知识点

    JAVASCRIPT 1.变量 1.1概念 变量源于数学,是计算机语言中存储计算结果或表示值抽象概念 计算机有个地方叫内存,变量都会将值存入到内存中,变量就是指向这个值的名字 1.2命名规则 1. 由 ...

  2. chm TO html 另类方法

    因为网上下了很多chmtohtml ,都是试用版的, 转成html网页格式,总是有限制,或是不完整,我现在找到了一种折中方法,供大家参考 一,我的资源里有工具word to chm  里面有转成网页的 ...

  3. 禁止body滚动允许div滚动防微信露底

    最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动. 正常来讲加上 body{height:100%;overflow: hidden;} 应该就阻止页面滚动了.可是很悲催的是手机端并 ...

  4. QMsgPack简介

    QMsgPack简介 首先,关于MessagePack协议,访问http://msgpack.org可以了解详细的格式约定及各种语言的实现. MessagePack协议号称比JSON快,但速度的快慢这 ...

  5. Redis事务为什么不支持回滚

    在事务运行期间,虽然Redis命令可能会执行失败,但是Redis仍然会执行事务中余下的其他命令,而不会执行回滚操作,你可能会觉得这种行为很奇怪.然而,这种行为也有其合理之处:只有当被调用的Redis命 ...

  6. Error: Cannot find module 'internal/fs'

    $ sudo n 6.9.1 $ sudo npm -g install npm@next $ sudo n stable curl -0 -L https://npmjs.org/install.s ...

  7. OpenShift DNS的机制

    为什么不直接用kube-dns? 为什么不直接用kube-dns? 为什么不直接用kube-dns? 感谢各位前辈的专研,在下午有限的时间里把Openshift DNS的机制理了一下.更详细的材料大家 ...

  8. 修改url地址参数

    使用changeURLPar('http://www.baidu.com?page=2&bb=cc','page',10) 得到结果http://www.baidu.com?page=10&a ...

  9. (转)使用百度 BAE做SVN服务器

    转自:https://www.sinosky.org/bae-svn.html#comment-1775 从这里下载 目前,无论是Windows平台.Linux平台还是Mac平台都有比较成熟的SVN客 ...

  10. [Big Data] Week 5 A (Advance)

    Question 1 Consider the diagonal matrix M = 1 0 0 0 2 0 0 0 0 . Compute its Moore-Penrose pseudoinve ...