【HTML5】Web存储
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存储的更多相关文章
- HTML5 Web存储(Web Storage)技术及用法
在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...
- HTML5 web 存储
简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...
- HTML5 Web存储 页面间进行传值
在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...
- 面试之HTML5 Web存储
前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...
- HTML5: HTML5 Web 存储
ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...
- 有趣的HTML5 Web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
- 【读书笔记】HTML5 Web存储
PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL. Cookie Cookie是HTML4中在客户端 ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- HTML5 web存储
既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...
- 使用HTML5 Web存储的localStorage和sessionStorage方式
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
随机推荐
- ASP.NTE 5 Target framework dnx451 and dnxcore50(转)原文：http://www.cnblogs.com/xishuai/p/aspnet5-target-framework-dnx451-and-dnxcore50.html
中文不知如何定义标题,所以干脆就直接贴出关键字,在 ASP.NTE 5 项目的 project.json 配置文件中,会有这样的定义: "frameworks": { " ...
- iOS高级必备
1.你使用过Objective-C的运行时编程(Runtime Programming)么?如果使用过,你用它做了什么?你还能记得你所使用的相关的头文件或者某些方法的名称吗? Objecitve-C的 ...
- Item 表单页面的 Select2 相关业务逻辑
Select2 插件官网:https://select2.github.io/ Select2 初始化说明: 代码在 public/javascripts/subchannel_items.js 中的 ...
- FATAL: ActionView::Template::Error (application.css isn't precompiled):
iwangzheng.com tty:[0] jobs:[0] cwd:[/opt/logs/m]13:02 [root@a02.cmsapi$ tail thin\ server\ \(0.0.0. ...
- c++中的srand()和rand() 转载 自：http://blog.sina.com.cn/s/blog_624c2c4001012f67.html
今天看了同事写的小程序,发现了其中出现了srand()和rand()这两个我以前没有用过的函数,当然从名字可以看出肯定能随机数有关,于是网查资料知这两个函数配合一起使用来产生随机数的,哈哈,又长知识了 ...
- [codeforces 293]B. Distinct Paths
[codeforces 293]B. Distinct Paths 试题描述 You have a rectangular n × m-cell board. Some cells are alrea ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
- 黑客逃避追踪，为什么要用虚拟机 + TOR + VPN 呢？
为啥要使用虚拟机 使用虚拟机主要有俩原因. 第一个是为了好收拾,清理痕迹什么的.特别是MAC地址,系统指纹信息等等,这些一旦被收集到都可以作为呈堂证供.用虚拟机,干了坏事把快照恢复一下就好,省的清理c ...
- 《C#高级编程》学习笔记------C#中的委托和事件(续)
本文转载自张子阳 目录 为什么要使用事件而不是委托变量? 为什么委托定义的返回值通常都为void? 如何让事件只允许一个客户订阅?(事件访问器) 获得多个返回值与异常处理 委托中订阅者方法超时的处理 ...
- vim技巧之快速进入引号删除至右引号前的内容
参考:http://blog.chinaunix.net/uid-23381466-id-88482.html f'l ct' #fX,X可用任何字符,l表示向右移一位,ct'表示删除至引号前di'