【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(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
随机推荐
- 新浪微博客户端(3)-封装UIBarButtonItem
单独给NavigationBar上的两个NavigationItem设置图片显得比较麻烦,下面对创建单个UIBarButtonItem的过程进行封装. UIBarButtonItem+Extensio ...
- 转:Java NIO系列教程(三) Buffer
Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...
- HttpApplication的处理管道处理过程简单描述
在asp.net中,asp.net服务器对每次请求的处理过程都是相同的,都要经过HttpApplication的处理管道.管道内的处理过程是固定的,在服务器处理请求的各个阶段,伴随着处理的进行,依次触 ...
- CMS介绍
CMS介绍 CMS是Content Management System的缩写,意为“内容管理系统”,它具有许多基于模板的优秀设计,可以加快网站开发的速度和减少开发的成本. CMS的功能不仅限于处理文本 ...
- mysql 启动 导入sql文件
mysql mysqld.exe mysqld.exe 是mysql的服务器进程,只有先启动这个进程才能连接服务器 dos下进入mysql文件目录下的bin目录,输入mysql -u root -p ...
- Xcode 4.6.3 Bug - .m 文件不能正常打开，uitableveiwController
当打开.m文件时尤其是自定义的继承uitableviewcontroler的m 文件.不能滑动,不能正常显示. 解决方法: 用文本编辑器打开这个文件,关闭xcode .然后在继承uitableview ...
- PHP5 Session 使用详解（一）
http协议是WEB服务器与客户端(浏览器)相互通信的协议,它是一种无状态协议.所谓无 状态,指的是不会维护http请求数据,http请求是独立的,不持久的.而越来越复杂的WEB应用,需要保存一些用户 ...
- Unable to execute dex: Multiple dex files define
这是一个编译错误,在ADT的编译器和SDK的工具有差异或是版本不一致时常会出现的一个问题,解决的方案如下: 第一步: updated eclipse (Help->Check for updat ...
- 入侵检测课设之Libnids开发包
Libnids开发包介绍 Libnids是一个用于网络入侵检测开发的专业编程接口,它使用了Libpcap所以它具有捕获数据包的功能.同时,Libnids提供了TCP数据流重组功能,所以对于分析 ...
- OpenStack 的Nova组件详解
Open Stack Compute Infrastructure (Nova) Nova是OpenStack云中的计算组织控制器.支持OpenStack云中实例(instances)生命周期的所有活 ...