HTML5学习(八)----Web存储
参考地址：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存储的更多相关文章
- HTML5学习笔记 Web存储
HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...
- HTML5学习之Web存储
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...
- HTML5学习(十)---Web Workers
参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...
- HTML5分析实战Web存储机制(Web Storage)
Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...
- HTML5学习总结——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- [html] 学习笔记--Web存储
HTML5 提供了两种在客户端存储数据的新方法之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效 ...
- HTML学习之Web存储（五）
本地数据库功能大大增强了Web应用对于本地存储数据的方式和功能.Web时代真正进入了:“客户端为重,服务端为轻的时代”. <!DOCTYPE html> <html xmlns=&q ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
随机推荐
- DevExpress gridView 小结（一）
一:第一列显示行号 CustomDrawRowIndicator this.gridViewDevice.IndicatorWidth = 40; this.gridViewDevice.Custo ...
- Linux文件目录结构说明
- html 元素添加 class
<!-- 给 input 添加 class 一个input 可以添加多个class 中间空格隔开. --> @Html.TextBox("txtIDNumber", & ...
- Python数据结构————二叉查找树的实现
对于二叉查找树的每个节点Node,它的左子树中所有的关键字都小于Node的关键字,而右子树中的所有关键字都大于Node的关键字. 二叉查找树的平均深度是O(log N). 1.初始化 class Bi ...
- TabControl控件
private void Form1_Load(object sender, EventArgs e) { #region 显示样式 tabControl1.ImageList = imageList ...
- 【jquery插件】收藏
http://www.oschina.net/project/tag/356/jquery-file-upload
- springMVC+MyBatis+Spring 整合(3)
spring mvc 与mybatis 的整合. 加入配置文件: spring-mybaits.xml <?xml version="1.0" encoding=" ...
- 团体程序设计天梯赛-练习集L2-002. 链表去重
L2-002. 链表去重 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一个带整数键值的单链表L,本题要求你编写程序,删除 ...
- HZNU1015: 矩阵排序
http://acm.hznu.edu.cn/JudgeOnline/problem.php?id=1015 题意:把矩阵每一行都排序. (以前觉得很难的题目回头看看原来如此简单 ][]; ; i&l ...
- Android 图片旋转（使用Matrix.setRotate方法）
imageView2 = (ImageView) findViewById(R.id.img2); Bitmap bitmap = BitmapFactory.decodeResource(getRe ...