HTML 5 Web 存储

在客户端存储数据

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

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

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

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

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

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

localStorage 方法

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

如何创建和访问 localStorage：

实例

<script type="text/javascript">

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

亲自试一试

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

实例

<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>

亲自试一试

sessionStorage 方法

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

如何创建并访问一个 sessionStorage：

实例

<script type="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

亲自试一试

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

实例

<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>

亲自试一试

HTML5 总结-Web存储-7的更多相关文章

  1. HTML5中Web存储

    HTML5 中web存储是一个比cookies更好的一个本地存储方式. 那么什么是HTML5存储呢? 使用HTML5可以在本地存储用户浏览的数据,HTML5技术没有出来之前是使用cookies进行本地 ...

  2. html5的web存储

    在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...

  3. 【html5】Web存储_locaStorage对象的应用

    Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...

  4. 【我的前端自学之路】【HTML5】web 存储

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...

  5. html5的web存储详解

    以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足 ...

  6. Html5的Web存储和WebSql

    HTML5 Web 存储 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用 ...

  7. HTML5的web 存储localStorage、sessionStorage

    说明 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案.我们可以使用localStorage ...

  8. HTML5新增web存储方式

    客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ...

  9. html5的web存储与cookie的区别

    以下从3个方面进行比较: 1,容量:cookie只有4KB,localStorage和sessionStorage最大容量5M 2,是否会携带到ajax中:cookie由每个对服务器的请求来传递,会影 ...

随机推荐

  1. mac 10.9开启有道词典取词功能

    取词时候,有道词典给出提示,说要去开启辅助功能,但提示的是在mac 10.8上面怎么操作,在10.9的话,就是以下位置去改了. 补充以下: 在mac机器上,实际上大多数的单词都能从自带的词典中查找到. ...

  2. Android开发之布局的学习

    FrameLayout-帧布局 实现效果: 代码: <?xml version="1.0" encoding="utf-8"?> <Frame ...

  3. python 解析xml 文件: DOM 方式

    环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...

  4. Contest - 第10届“新秀杯”ACM程序设计大赛网络预选赛 赛后信息（晋级名单）

    经过比赛结果以及综合评定,以下42名同学暂定出现.下为出现名单(打*为 友情参赛 或为 有重大作弊嫌疑的选手). 在即日24时之前,若有异议,仍可申诉,申诉邮箱:desgard_duan@foxmai ...

  5. javaWEB总结(3):ServletConfig对象

    1.首先找到ServletConfig的API: ServletConfig封装了servlet的配置信息,并且可以获取servletContext对象. ServletConfig共有四个方法: 1 ...

  6. Spring Cloud Alibaba到底坑不坑？

    之前我发过一篇<说说我为什么看好Spring Cloud Alibaba>,然后这两天有网友给我转了这篇文章<坑爹项目spring-cloud-alibaba,我们也来一个>, ...

  7. compareTo的用法

    在java编程中,我们会偶尔遇到字符串大小比较的问题,compareTo()方法很简单就实现这种功能.该方法用于判断一个字符串是否大于.等于还是小于另一个字符串.判断字符串大小的依据是根据它们在字典表 ...

  8. Golang学习---常用库

    1. 路由库:github.com/julienschmidt/httprouter 2. mysql驱动:github.com/go-sql-driver/mysql

  9. python-web自动化环境安装

    web自动化环境安装 1.安装selenium 命令行使用以下命令安装selenium:pip install -U selenium 2.安装chrome浏览器 3.chromedriver的下载  ...

  10. 【转】Python xlrd、xlwt、xlutils读取、修改Excel文件

    Python xlrd.xlwt.xlutils读取.修改Excel文件 一.xlrd读取excel 这里介绍一个不错的包xlrs,可以工作在任何平台.这也就意味着你可以在Linux下读取Excel文 ...