`

HTML5本地存储详解

 
阅读更多

HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。

HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。

1sessionStorage

检测

!!window.sessionStorage;

常用方法

.key = value

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()


事件:

window.onstorage

检测值得变化,浏览器支持不好。

说明:

  1. cookie的存储限制在了4k之内,相比来说,session storage有了更大的存储空间,但至于具体多大,这要参照浏览器厂商的具体实现。
  2. cookie有一个机制,就是在每次客户端请求服务器的时候都会将cookie发送给服务器,这无疑会做很多不必要的操作,因为并不是每次请求服务器都需要cookie的所有信息,而session storage很好的解决了这个问题,它不是采取自动发送的方式,这样就减少了不必要的工作。
  3. 通过sessionStorage所存储数据的生命周期,和Session类似,关闭浏览器(或标签页)后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。
  4. session storage每个窗口的值都是独立的(每个窗口都有自己的数据),它的数据会随着窗口的关闭而消失,窗口间的sessionStorage也是不可以共享的。
  5. setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码:setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数),而是’16’(字符串)。
  6. 再次使用setItem设置已经存在的key的value时,新的值将替代旧的值。
  7. 当存储中的数据发生改变时,会触发相应的事件(window.onstorage),但目前各浏览器对此事件的支持并不完善,暂时可以忽略。

2localStorage

检测

!!window.localStorage;

方法和sessionStorage相同

说明:

  1. local storage把只把数据存储在了客户端使用,不会发送的服务器上(除非你故意这样做)。
  2. 而且对于某一个域下来说,local storage是共享的(多个窗口共享一个“数据库”)。
  3. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

举例


3Database Storage

对简单的数据存储,使用sessionStoragelocalStorage能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是HTML 5Web SQL Database”API接口的应用所在。

A、打开链接


以上代码创建了一个数据库对象db,名称是Todo,版本编号为0.1db还带有描述信息和大概的大小值。如果需要,这个大小是可以改变的,所以没有必要预先假设允许用户使用多少空间。

绝不可以假设该连接已经成功建立,即使过去对于某个用户它是成功的。为什么一个连接会失败,存在多个原因。也许用户代理出于安全原因拒绝你的访问,也许设备存储有限。面对活跃而快速进化的潜在用户代理,对用户的机器、软件及其能力作出假设是非常不明智的行为。比如,当用户使用手持设备时,他们可自由处置的数据可能只有几兆字节。

B、执行查询


  1. 执行SQL语句使用database.transaction()函数,该函数只有一个参数,负责执行查询的函数。
  2. 该函数具有一个类型事务的参数(tx)。
  3. 该事务参数(tx)具有一个函数:executeSql()。这个函数使用四个参数:
    表示查询的SQL字符串;插入到查询中问号所在处的字符串数据;一个成功时执行的函数;一个失败时执行的函数。
  4. 执行成功的函数有两个参数:tx2,事务性参数;result,执行的返回结果,结构如图
  5. 执行成功的函数也有两个参数:tx2,事务性参数;error,错误对象,结构如图

C、其它

  • Chrome支持; firefox(测试时版本4.01)不支持;IE8不支持。

D、示例


4globalStorage

这个也是html5中提出来,在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,localStorage一样,域中任何一个页面存储的信息都能被所有的页面共享

基本语法

  • globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。
  • globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。
  • globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。
  • globalStorage[''] —— 在任何域名下的任何网页都可以通过这个命名空间存储对象来进行读和写

方法属性

  • setItem(key, value) —— 设置或重置 key 值。
  • getItem(key) —— 获取 key 值。
  • removeItem(key) —— 删除 key 值。
  • 设置 key 值:window.globalStorage["planabc.net"].key = value;
  • 获取 key 值:value = window.globalStorage["planabc.net"].key;

其它

  • 过期时间同 localStorage,其它的一些特性也和localStorage相似。
  • 现在Firefox只支持当前域下的globalStorage存储, 如果使用公用域会导致一个这样一个类似的错误“Security error” code: “1000”。

5、兼容性

方法

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

localStorage

4

2

8

10.50

4

sessionStorage

5

2

8

10.50

4

globalStorage

--

2

--

--

--



分享到:
评论

相关推荐

    html5-本地存储

    ### HTML5本地存储详解 #### 一、HTML5本地存储概述 HTML5本地存储(LocalStorage)作为HTML5标准的一部分,提供了强大的客户端数据存储能力。它允许网页应用在用户的浏览器上持久化存储数据,无需每次都从服务器...

    html5本地存储 localStorage操作使用详解

    HTML5的本地存储功能极大地增强了Web应用程序的能力,使得开发者能够在用户浏览器端持久地存储数据,无需服务器交互。本文主要探讨了HTML5中的两种本地存储形式——`localStorage`和`sessionStorage`,以及它们的...

    5个HTML5的常用本地存储方式详解与介绍

    HTML5提供了一些全新的本地存储解决方案,它们是Web开发中非常重要的技术,可以用来存储用户的私有数据,包括数据和资源,以提升用户体验。在HTML5标准之前,主要的存储方式是通过cookies来实现的,但这种方法有一些...

    HTML5 本地存储 LocalStorage详解

    HTML5的本地存储机制,尤其是LocalStorage,是现代Web开发中不可或缺的一部分,它允许开发者在用户的浏览器上持久化地存储数据,而无需借助于Cookie或Flash等传统方式。LocalStorage的引入,解决了早期存储技术如...

    Html5 web本地存储实例详解

    HTML5 Web本地存储(Web Storage)是HTML5中提供的在客户端存储数据的新特性。它提供了两种存储类型:sessionStorage和localStorage,它们为Web应用提供了更为方便的数据存储手段。 sessionStorage的特性是它的数据...

    HTML+5开发精要与实例详解代码清单

    7. web storage(localStorage和sessionStorage):提供了比cookies更大的存储空间,用于在本地存储用户数据。 8. web workers:后台线程处理繁重任务,不阻塞用户界面,提升性能。 二、HTML5实例详解 1. 画布动画...

    详解HTML5 LocalStorage 本地存储

    1.前言 HTML5 storage提供了一种方式让网站能够把信息存储...在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随

    HTML5开发精要与实例详解

    2. **离线存储**:通过`localStorage`和`sessionStorage`,HTML5允许网站在用户浏览器中存储数据,即使在离线状态下也能访问部分网页内容,提高了用户体验。 3. **多媒体支持**:HTML5原生支持音频()和视频()...

    HTML5本地存储之Web Storage详解

    在HTML5中,Web Storage是一项重要的本地存储技术,它解决了传统cookie存在的诸多问题,如大小限制和不必要的网络传输。Web Storage分为两种类型:Session Storage和Local Storage,两者都是用来在用户的浏览器上...

    html5 实例详解

    12. **Storage本地存储**:除了离线存储,HTML5还提供了localStorage和sessionStorage,用于在浏览器中持久化地存储数据,提升用户体验。 通过以上特性,HTML5不仅简化了网页开发,也带来了更多的互动性和功能性。...

    本地存储localStorage用法详解

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...

    HTML5 Web 存储详解

    HTML5 Web 存储是现代Web开发中的一个重要特性,它为网页应用提供了在客户端本地存储数据的能力,从而降低了对服务器的依赖,提升了用户体验。本文将详细介绍HTML5中的两种主要存储方式:localStorage和...

    html5离线存储

    ### HTML5离线存储技术详解 #### 一、HTML5离线存储概述 HTML5作为新一代的HTML标准,标志着Web领域的重要发展。其中一项重要的新特性便是对离线应用的支持,使得Web应用即使在网络不可用的情况下也能保持可用性。...

Global site tag (gtag.js) - Google Analytics