在客户端存储数据
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>
下面的例子对用户访问页面的次数进行计数:
<!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:
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
下面的例子对用户在当前 session 中访问页面的次数进行计数:
<!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>
相关推荐
一个本地数据库(Web SQL Database)实现的通信录;介绍怎样创建打开数据库,创建表,添加数据,更新数据,删除数据,删除表 等等。
1.3 HTML的基本结构 5 1.3.1 HTML文件的编写方法 5 1.3.2 文件开始标签<html> 7 1.3.3 文件头部标签<head> 7 1.3.4 文件标题标签<title> 7 1.3.5 文件主体标签<body> 7 1.3.6...
点和应用,并与现有的Web 技术如RIA( Rich Internet Applications) 、cookies 等在网络通信、数据存储、地理定位、音视频播 放、网页绘图方面进行比较,分析HTML5 在这些领域的优势,从而得出结论。HTML5 较之前的...
包括HTML基础、HTML文件基本标记、设计网页文本内容、使用列表、使用超链接、使用图像、表格的应用、层——div标签、编辑表单、多媒体页面、HTML5的新特性、HTML5与HTML4的区别、HTML5的结构、HTML5中的表单、文件与...
HTML5的发展得如火如荼,各位技术人员都在深入的研究和试图掌握此项技术,Webkit就做到了HTML5方式的客户端...客户端数据库存储接口允许网页应用通过SQL——这个很多Web开发者已经熟悉的媒介,存储结构化的本地数据。
我深感性能优化实在是前端知识树中特别的一环——当你需要学习前端框架时,文档和源码几乎可以告诉你所有问题的答案,当你需要学习 Git 时,你也可以找到放之四海皆准的实践方案。但性能优化却不一样,它好像只能是...
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
之所以本书取名《HTML5&CSS3开发大起底》,是因为书中除了覆盖从网站开发到运营全过程外,横向上几乎涉及了全部的知识点——基本元素、css3样式、画布、矢量图、语义元素、本地存储、多媒体处理、点对点通讯、线程、...
借助Web Storage API实现游戏数据的本地存储,方便玩家随时继续游戏。 跨平台兼容性: 确保游戏在不同浏览器和操作系统上都能正常运行。 测试游戏在不同设备上的性能表现,进行必要的优化和调整。 社区与反馈: 建立...
接着介绍JSP的新功能——标签库和Java最有用的特征——面向对象;然后用大量可运行的实例为读者详细介绍如何进行Web设计和管理数据。通过对本书的学习,读者将能够创建更富有动态的表现方式、展现最新信息、允许用户...
爬虫(Web Crawler)是一种自动化程序,用于从互联网上收集信息。其主要功能是访问网页、提取数据并存储,以便后续分析或展示。爬虫通常由搜索引擎、数据挖掘工具、监测系统等应用于网络数据抓取的场景。 爬虫的...
图形和图库是统一的XML格式,便于传输、存储和维护,支持WEB开发。 3.响应众多的图形操作事件,任意给图形添加属性成函数,任意自定义图形。 4.可以建立和分析图形间的任意拓朴连接关系,实现各种逻辑运算与控制...
接着介绍JSP的新功能——标签库和Java最有用的特征——面向对象;然后用大量可运行的实例为读者详细介绍如何进行Web设计和管理数据。通过对本书的学习,读者将能够创建更富有动态的表现方式、展现最新信息、允许用户...
第1篇为技能学习篇,主要包括Java Web开发环境、JSP语法、JSP内置对象、Java Bean技术、Servlet技术、EL与JSTL标签库、数据库应用开发、初识Struts2基础、揭密Struts2高级技术、Hib锄劬e技术入门、Hibernate高级应用...
ESweb最大特色 —— 简单易用!! (因此她非常适合PHP新手们,只要懂得一点点PHP基础知识都能阅读程序,呵呵~) 程序规格: 1.ESweb全面支持最新的PHP版本,可以在PHP5.2及PHP6下无报错运行. 2.ESweb在模板引擎上使用的...
Oracle9i备课笔记——吕海东 第1讲 Oracle9i简介 目的: 1. 了解数据库的发展,关系数据库的基本原理。 2. 了解目前市场上流行的数据库产品及特点 3. 了解Oracle数据库的发展 4. 掌握Oracle9i产品系列 5. 掌握Oracle...
爬虫(Web Crawler)是一种自动化程序,用于从互联网上收集信息。其主要功能是访问网页、提取数据并存储,以便后续分析或展示。爬虫通常由搜索引擎、数据挖掘工具、监测系统等应用于网络数据抓取的场景。 爬虫的...
接着介绍JSP的新功能——标签库和Java最有用的特征——面向对象;然后用大量可运行的实例为读者详细介绍如何进行Web设计和管理数据。通过对本书的学习,读者将能够创建更富有动态的表现方式、展现最新信息、允许用户...