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的更多相关文章

  1. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

  2. html5本地存储web storage的简单使用

    html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...

  3. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  4. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  5. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  6. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  7. 本地存储 web storage

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. html5本地存储 local storage

    HTML5 web storage, a better local storage than cookies. With HTML5, web pages can store data locally ...

  9. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

随机推荐

  1. 如何让ECSHOP不同的分类调用不同模板方法

    如何给ecshop商品分类,显示不同的模板的话.可以通过不同的分类ID来取得不同模板.我们可以通过分类ID来判断,比如分类为1的,调用cat1.dwt.分类为2的,调用cat2.dwt,我们在cate ...

  2. 骨骼动画的实现(OpenGL实现)

    人物模型动画一直是游戏中最重要的组成部分, 因此这里我们研究骨骼动画是如何实现的. 原理 首先模型通常是由多个三角形形成的网格构成, 每个三角形有三个顶点, 因此动画的根本原理就在于不同时间内为每个顶 ...

  3. .NET Framework 基础知识总结

    C#: 1. public:同一个程序集的任何代码或引用该程序集的其他程序集都可以访问该类型或成员 internal:同一个程序集的任何代码都可以访问该类型或成员 private :只有在结构或类中的 ...

  4. WCF Failed to invoke the service. Possible causes: The service is offline or inaccessible

    今天写WCf 时遇到如下报错: 调试过程发现,各个过程都无异常,但是返回给调用端数据时出现如下错误. Failed to invoke the service. Possible causes: Th ...

  5. 大数据存储:MongoDB实战指南——常见问题解答

    锁粒度与并发性能怎么样? 数据库的读写并发性能与锁的粒度息息相关,不管是读操作还是写操作开始运行时,都会请求相应的锁资源,如果请求不到,操作就会被阻塞.读操作请求的是读锁,能够与其它读操作共享,但是当 ...

  6. android 退出机制

    android sdk 退出机制的研究 有多种, 方法一.用list保存activity实例,然后逐一干掉 上代码: import java.util.LinkedList; import java. ...

  7. C#使用Timer.Interval指定时间间隔与指定时间执行事件

    C#中,Timer是一个定时器,它可以按照指定的时间间隔或者指定的时间执行一个事件. 指定时间间隔是指按特定的时间间隔,如每1分钟.每10分钟.每1个小时等执行指定事件: 指定时间是指每小时的第30分 ...

  8. 关于实现一个基于文件持久化的EventStore的核心构思

    大家知道enode框架的架构是基于ddd+event sourcing的思想.我们持久化的不是聚合根的最新状态,而是聚合根产生的领域事件.最近我在思考如何实现一个基于文件的eventstore.目标有 ...

  9. C#中的线程二(Cotrol.BeginInvoke和Control.Invoke)

    C#中的线程二(Cotrol.BeginInvoke和Control.Invoke) 原文地址:http://www.cnblogs.com/whssunboy/archive/2007/06/07/ ...

  10. GDT,LDT,GDTR,LDTR 详解,包你理解透彻(转)

    引自:http://www.techbulo.com/708.html 一.引入 保护模式下的段寄存器 由 16位的选择器 与 64位的段描述符寄存器 构成 段描述符寄存器: 存储段描述符 选择器:存 ...