HTML5本地存储 Web Storage - 紫尘

标签: html5 web storage | 发表时间:2014-04-29 17:17 | 作者:紫尘
出处:

Web Storage基本介绍

  HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式。

    localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;

    sessionStorage在会话期内有效,数据在浏览器关闭后自动删除;

    localStorage是基于域的,任何在该域内的页面都可以访问, sessionStorage在保存它的窗口,和由当前窗口创建的新窗口有效,直到相关联的标签页关闭; 

  Web Storage其实是HTML4 中 cookies存储机制的一个改进版本,但是两种机制的功能又不相同:

    cookie在浏览器和服务器间来回传递, sessionStorage和localStorage不会;

    sessionStorage和localStorage的存储空间更大,有更多丰富易用的接口,各自独立的存储空间;

  请注意以上区别,前端面试中,只要问到 html5 相关 基本就这些。

浏览器的支持情况

  目前所有主流的浏览器都在一定程度上支持 HTML5 的 Web Storage特性。 由下图可以看出,基本上所有现代浏览器都已经支持 Web Storage。

  

  移动浏览器的情况更为乐观

  Android平台和 IOS 平台各自的浏览器都基本上支持 Web Storage 本地存储特性。 目前市场上的移动设备, 除了 android 手机和 iphone 手机外,越来越多的平板电脑面世,而且基本上依赖着两种平台。在移动端使用 Web Storage 我们几乎不需要考虑浏览器是否支持, 当然从代码的严谨来说,建议最好在使用前先检查浏览器是否支持

if (window.localStorage) {
// 浏览器支持 localStorage
}

if (window.sessionStorage) {
// 浏览器支持 sessionStorage
}

Web Storage API

interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};

  所谓DOMString: 一个UTF-16字符串,JavaScript正是使用了这种编码的字符串,所以 DOMString就等同是JavaScript中的 String.

  每个存储对象提供一个 key/value ( 键/值 ) 对列表, 被称为数据项。 key 可以是任意的字符串( 包括空字符串 ),value 也可以是任意的字符串。

  规范定义的接口提供了: 

  localStorage.length                          一个只读的 length属性。 可以知道 localStorage 中存储着多少条数据

  localStorage.setItem(key, val)          存储一条数据

  localStorage.getItem(key)                通过 key 获取该条数据

  localStorage.removeItem(key)          删除一条数据 

  localStorage.clear()                         清空所有 key/value 键值对 items

      

  Storage 只能存储key/value对,而且只支持字符串类型的数据, setItem() 方法传入的值都会自动转化为 string 类型。复合数据类型(Array Object)转化结果同 toString 方法。

   如果你想保存其它类型的数据,在保存的时候需要转化成字符串,在读取时,再转化回来;

  使用 localStorage 存储和读取 JSON 格式数据:

// 定义JSON格式字符串
var userData = {
name: "zichen",
age: "24",
sex: "男",
adress: "杭州"
}

// 存储 userData 数据
localStorage.setItem("userData", JSON.stringify(userData));

// 读取 userData 数据并赋值给变量
var newUserData = JSON.parse(localStorage.getItem("userData"));

console.log(newUserData);

// 删除 userData
localStorage.removeItem("userData");

  sessionStorage 浏览器支持情况同 localStorage , 属性和方法及使用方式也和 localStorage一致。

Storage 事件监听

  对 Storage 进行存取操作的同时,如果需进行监听,可以使用 HTML5 Web Storage API内置的事件监听器对数据进行监控, Storage中的数据有任何变动,Storage监听器都能捕获,接口定义:

interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};

  key 表示属性中的键名。

  oldValue 更新前的键值。

     newValue 数据更新后的键值。

  url 记录 Storage 事件发生时的源地址。

  StorageArea 指向事件监听对应的 Storage对象

  

  使用 w3c 标准事件注册方法 addEventListener 进行注册监听:

window.addEventListener(“storage”,
function(e) {
console.log(e)
},
true);

 

 

 


本文链接: HTML5本地存储 Web Storage,转载请注明。

相关 [html5 web storage] 推荐:

【HTML5】Web Storage简析

- - 博客园_首页
什么是Web Storage. web storage是HTML5规范中提出的一种本地存储解决方案. 在这之前,我们在开发中遇到本地存储问题时,通常有两种解决方式. cookie:兼容性最好,但也有不少问题,下面会简单做下对比. 各浏览器实现的非标准化的本地存储方案,如IE的userData,firefox的global storage等,毫无疑问,最大的问题是兼容性.

HTML5本地存储 Web Storage - 紫尘

- - 博客园_首页
Web Storage基本介绍.   HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式.     localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;.

HTML5的Web标准实战

- johnny - blog.moocss.com
我记得2009年下半年的时候,我就开始尝试使用HTML5的新元素,具体的说应该是HTML5的结构性元素的使用. 我使用HTML5的结构性元素重构我的博客,刚开始,查看了大量老外博客,也归纳总结了一下使用场景,在什么情况下使用HTML5的新元素代替原有的没有语义性div,还有如何组织文档内容结构也是比较头疼的事情.

HTML5 Web socket和socket.io - wishyouhappy

- - 博客园_首页
   HTML5的新特性,用于双向推送消息(例如网页聊天,手机推送消息等). client利用regular http请求webpage. 请求的webpage 执行javascript脚本,open a connection to server.. 有新的信息时服务器和客户端可以相互发送信息(Real-time traffic from the server to the client .

HTML5引领下的Web革命

- - 译言-电脑/网络/数码科技
HTML5引领下的Web革命. ACM通讯,第55卷,第7刊,16到17页 10.1145/2209249.2209256. 万维网开发人员最近表示新的HTML5标准对网络的演变过程,工作方式和使用途径而言,都是一次非凡的革新. 新的标准简化了程序运行方式,协调了各种终端设备和应用程序之间互访的入口,给用户带了让人惊喜的全新功能.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢,已由以往的 native app,開始轉向採用 web app,因為後者始終不受平台限制,只要編寫一個支援 HTML-5 格式的 web app,就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用,對於研發程式的公司來說,確實是最具經濟效益的方法.

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息,据国外媒体报道,AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行.   iPhone版Visual Voicemail将是AT&T的首款网络API.

HTML5 Web Speech API,让网站更有趣

- - SegmentFault 最新的文章
Web API 变得越来越丰富,其中一个值得注意的是 Web Speech API. 传统的网站只能“说”,这个API的出现,让网站能“倾听”用户. 这个功能已经开放了一系列的用法,非常棒. 在这篇文章中,我们将看一下这项技术和建议的用法,以及如何用它来增强用户体验的一些好例子. 声明:本技术比较前沿,目前该规范是W3C的“非官方编辑器的征求意见稿”(截至2014年6月6日).

查看 MySQL 支援哪些 Storage Engine

- - Tsung's Blog
MySQL 支援的 Storage Engine 很多, 如下述:. 查看 MySQL 支援哪些 Storage Engine. MySQL 系統能夠使用的 Storage Engine 有哪些呢?. 可以使用 SHOW ENGINES 來查看, 有出現 "Support: Yes" 的, 就是可以使用的..

Web程序员们,你准备好迎接HTML5了吗?

- 小伟 - 博客园-首页原创精华区
作者: dangjian 发表于 2010-09-07 01:44 原文链接 阅读: 4674 评论: 37. HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverlight等插件,也简化了原来需要大量JS才能达到的效果.