参考地址:http://www.w3school.com.cn/html5/html_5_webstorage.asp

在客户端存储数据

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

  • localStorage - 没有时间限制的数据存储,localStorage 存储数据是长久的
  • sessionStorage - 针对一个 session 的数据存储 sessionStorage 存储数据只是在一个会话中时行存储

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

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

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

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

localStorage 方法

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 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

如何创建并访问一个 sessionStorage:

<!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存储

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

  2. HTML5学习之Web存储

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

  3. HTML5学习(十)---Web Workers

    参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...

  4. HTML5分析实战Web存储机制(Web Storage)

    Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...

  5. HTML5学习总结——本地存储

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

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

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

  7. HTML学习之Web存储(五)

    本地数据库功能大大增强了Web应用对于本地存储数据的方式和功能.Web时代真正进入了:“客户端为重,服务端为轻的时代”. <!DOCTYPE html> <html xmlns=&q ...

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

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

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

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

随机推荐

  1. C# 获取中文星期的两种方法

    //方法一 public string Week() { string[] weekdays = { "星期日", "星期一", "星期二" ...

  2. google map 点击获取经纬度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. MySQL基础学习之函数

    数学函数 绝对值      abs() 圆周率      PI() 平方根 sqrt() 模除取余   mod(被除数,除数) 随机数      rand() 四舍五入    round(数字) 次方 ...

  4. 用PHP生成随机数的函数

    转自:http://www.jbxue.com/article/5034.html 介绍:在早期的php中生成一个随机字符串时,总是先创建一个字符池,然后用一个循环和mt_rand()或rand()生 ...

  5. delphi xe memory leak produced in WSDLLookup.pas

    constructor TWSDLLookup.Create; begin FLookup := TDictionary<string, Variant>.Create; end; des ...

  6. (转)Qt Model/View 学习笔记 (三)——Model类

    Model类 基本概念 在model/view构架中,model为view和delegates使用数据提供了标准接口.在Qt中,标准接口QAbstractItemModel类中被定义.不管数据在底层以 ...

  7. PHP 对数组数值进行排序,使用另一个容器

    <?php /* 排序方式::事实上只需要将要循环的数组进行N次循环,然后每次取最大的一个值*/ $array = array(100,25,10,258,33,48,10,5,13,58,33 ...

  8. 域名的a记录转过来他的公网ip

    首先 客户要我把域名 和项目进行绑定客户需要提供万网或者新网的账户,登进去域名管理  选项域名管理的A记录定向到那个公网ip上 与服务器做绑定然后 在服务器的iis 上 加个主机头 输入主机头名称 也 ...

  9. c#面向对象机制的进一步理解

    今天看到一个面试题很有意思: namespace EventTest{ class Program { static void Main(string[] args) { A a = new C(); ...

  10. NodeJS用递归实现异步操作的链式调用,完成一个简易的命令行输入输出REPL交互接口

    REPL —— Read-Eval-Print-Loop. 00.一门好的编程语言的必要条件 REPL并不是什么高大上的东西,简单的说就是一个从命令行程序,读取终端输入,处理,打印结果,如此循环.这是 ...