HTML5系列:HTML5本地存储

1. Web Storage存储

  HTML4在客户端存储数据通常使用Cookie存储机制将数据保存在用户的客户端,但使用Cookie方式存储客户端数据存在一系列的制约发展因素,如限制存储数据空间大小、数据安全性差等。

  HTML5中新增两种数据存储方式:Web Storage和Web SQL Database。前者可用于临时或永久保存客户端的少量数据,后者是客户端本地化的一套数据库系统,可以将大量的数据保存在客户端,而无需与服务器交互。

  Web Storage页面存储根据Web Storage API区分会话数据与长期数据,相应的API类型分为两种:

  sessionStorage(保存会话数据)

  localStorage(在客户端长期保存数据)

1.1 sessionStorage对象

  sessionStorage对象保存数据实质的保存在session对象中,用户在打开浏览器时,可以查看操作过程中要求的临时数据,一旦关闭浏览器,所有使用sessionStorage对象保存的数据都将会丢失。

  sessionStorage对象保存数据操作格式:

sessionStorage.setItem(key, value);

其中,key表示存储数据的键名,value表示存储数据的键值。

  sessionStorage对象读取数据操作格式:

sessionStorage.getItem(key)

其中,key表示存储数据的键名,该方法将返回一个指定键名的键值,如果不存在,则返回null。

时间: 2024-12-28 15:44:04

HTML5系列:HTML5本地存储的相关文章

html5画图和本地存储

<!DOCTYPE HTML><html><body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type=&q

HTML5规范的本地存储

在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorage){ //浏览器支持localStorage } if(window.sessionStorage){ //浏览器支持sessionStorage } localStorage 主要作用是将数据保存在客户端中,也就是用户的计算机上. 是基于域的,在该域的任何网页都可以访问,在不同设备上存储的是不同

Html5 的 WebStorage 本地存储

Html5支持两种的WebStorage,一种是永久性的本地存储(localStorage),另外一种是会话级别的本地存储(sessionStorage). 1 会话级别的本地存储:sessionStorage 在Html5中增加了一个Js对象:sessionStorage:通过此对象可以直接操作存储在浏览器中的会话级别的WebStorage.存储在sessionStorage中的数据首先是Key-Value形式的,另外就是它跟浏览器当前会话相关,当会话结束后,数据会自动清除,跟未设置过期时间的

初识html5的localStorage本地存储

一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的网站,数

HTML5 indexedDB前端本地存储数据库实例教程 (转载)

一.indexedDB为何替代了Web SQL Database? 跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样,在前端领域,也不是哪来先出来哪个就在日后引领风骚的. HTML5 indexedDB和Web SQL Database都是本地数据库数据存储,Web SQL Database数据库要出来的更早,然并卵.从2010年11月18日W3C宣布舍弃Web SQL database草案开始,就已经注定Web SQL Database数据库是明日黄花. 未来一定是indexedDB的,从

HTML5 localstorage浏览器本地存储

应用场景: 当我们用JSON来模拟后台数据的时候,前台增删改查都是把数据放到一个JavaScript对象中,但是这种方法的数据只能作用于一个页面.localstorage的出现解决了我们这个问题!即通过localstorage把数据存储在浏览器上,然后在另一个要引用此数据的页面中再取出localstorage的东西! 比如:当你首次访问某个页面,在该页面中展开主菜单的子菜单,刷新页面,子菜单已经自动展开(因为该状态已经被记录到浏览器中了),或者说关闭浏览器重新打开该页面,子菜单依旧是展开的. 代

HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(19)--HTML5 Local Storage(本地存储) 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. 借用网上的一张图来看下目前主流的本地存储方案: Cookie: 在web中得到广泛应用,但局限

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

html5本地存储(一)------ web Storage

在html5中与本地存储相关的两个相关内容:Web Storage  与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上存储数据的功能(针对客户端本地),使用它可以再客户端本地建立一个数据库,这样可以存储页面内容在本地,还加快了访问数据的速度. web Storage分两种:sessionStorage   与  localStorage 一.sessionStorage sessionStorage为临时保存,将数

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一