Html5本地数据库存储

分享到:

在客户端存储数据

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>  
昵    称:
验证码:

相关文档:

  • HT for Web自定义3D模型的WebGL应用
    有不少朋友询问《HTML5Web客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的,这个例子是通过导入3dmax设计好的表计模型...
  • HtmlEntities
    #regionGetOnlyTextFromHtmlCode+RemoveHtmlChars+RemoveTagFromHtmlCode ///<summary> ///http://www.codeproject.com/script/Content/ViewAssociatedFi...
  • Hexo
    Hexo是一个快速,轻量,强大的Node.js博客框架。带给你难以置信的编译速度,瞬间生成静态文件;支持Markdown,甚至可以在Hexo中集合Octopre...
  • 关于HTML5本地存储的sessionStorage与localStorage的简单用法
    HTML5使用setItem,getItem,removeItem,clear等方法来存储和访问数据。 //存储数据 functionsetstorage(key,val){ if(window.localStorage) localStorage.setItem(key,val);...
  • cocos2d-html5的字符输入框
    现在cocos2d-html5似乎还没有开发出输入框的概念,于是自己仿造了了他的menu类和menuItem类的关系继承menu类实现了一个inputMenu类,继承menuIte...
  • 史上最全的Chrome使用技巧集锦
    1Chrome的隐身模式 2 3先来说说隐身模式的启用方法吧 4 51.键盘快捷:Ctrl+Shift+N。 6 72.在Windows7下的任务栏处,右击“Chrome”图标,会...
  • HTML5学习笔记4
    10.表单元素表单元素用于获取用户的输入数据form表示HTML表单属性:action表示表单提交的页面method表示表单提交的请求方式:有POST和GET两...
  • html5的标签
    1.article与sectiondiv的区别 当一个标签只是为了样式化或者方便脚本使用时,应该使用div。 section表示一段专题性的内容,一般会带有标题.,...
  • java html5 bootstrap 后台框架-完整版
    新增:1.代码生成器,将大大提高开发效率,增删改查的处理类,service层,mybatis的xml,SQL脚本等重复低级的代码将瞬间生成,从此不再...
  • 正确看待HTML5的语法变化
    也许会有人问:“HTML4已经很普及了,如果改变基础语法,会不会有什么影响?” 我们都知道,在HMTL5之前几乎没有符合标准规范...
  • HTML5预览本地图片
    以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的,如果想查看本地图片但不使用服务端的上传功能,可以使...
  • 移动前端HTML5 UI 框架Onsen UI – 新潮 PhoneGap 界面框架
    OnsenUI是一个基于元素自定义的HTML5UI框架,用于构建你的移动前端。这个一个基于Web组件的概念的框架,让构建应用程序变得更加轻松。O...
  • 20款优秀 jQuery Lightbox 灯箱插件
    jQueryLightbox灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频和其它内容(使用模式窗口)。如果你是一个开发人员,你必...
  • [原创]基于html5新标签canvas写的一个小画板
    最近刚学了canvas,写个小应用练习下 源代码 1<!DOCTYPE> 2<html> 3<head> 4<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 5...
  • [html5/css3] html5中新增和废除的属性
    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性。 新增的属性 1、表单相关的属性 对input(type=text)、select、textarea...
  • 4款基于html5 canvas充满想象力的重力特效
    今天给大家分享4个物理和重力实验,用来展示htmlcanvas的强大。几年前,所有这些实验都必须使用Java或Flash才能做。在下面这些惊人的例...
  • html5+javascript div拖拽
    <!doctypehtml> <html> <head> <metacharset="UTF-8"> <title>HTML5-Drag-Demoby顽Shi</title> <style> .column{ he...
  • [简介]HTML5 and CSS3
    一.HTML51.语义标签与新增表单控件标签更加语义化headerfooterarticle等 还增加了许多表单控件记得有:进度条,颜色选择,日期等 2.音频,...
  • HTMl5的sessionStorage和localStorage
    文章来源:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html感谢分享! html5中的WebStorage包括了两种存储方式:sessionStorage和localStorage...
  • Horseman
    Horseman是一个Node.js模块,让你可以更轻松的使用PhantomJS进行功能测试,页面自动机,网络监控,屏幕捕获等。它提供了直接,链式的API,...