一、两个存储系统
两个存储系统
- 万维网最初的设想，是作为展示信息的一种方式。信息处理是后来才出现的，但是Web的实质并没有变---信息在服务器上处理，然后显示给用户。因为系统没有利用计算机资源，所以复杂操作都是在服务器上完成的
- 对于任何程序来说，能够实现数据存储是必备功能之一，并且在需要的时候能够提供数据。但在过去的Web用户端，没有能够支持数据存储的有效机制
- cookie曾用来在客户端存储少量信息，但受其性质所限，cookie只能存储一些短的字符串
- 在 HTML5中提供了 Web 存储 API，它是在cookie之上的增强。这个API允许我们在用户的硬盘上存储。并在日后使用这些数据。
- 这个API 可以分成两个部分:
- 信息必须且只在会话过程中使---sessionStorage
- 信息必须长期保存且由用户决定时长---localStorage
二、sessionStorage
sessionStorage概述
- sessionStorage这部分API就像是会话cookie的替代。cookie以及sessionStorage都是在特定的时间段内保持数据可用。但cookie使用浏览器作为引用，而sessionStorage使用单个窗口作为引用，这就意味着，窗口关闭之后，sessionStorage就不能再使用。
创建数据
- sessionStorage 和 localStorage 都将数据存储为项。项采用键/值对的组合格式
- 语法:
- setItem(key,value): 用键和值创建项。如果键已经存在，则更新值，所以也可以用这个方法更新值
- getItem(key): 指定要获取的项的键，根据键得到对应的值
// 设置数据
sessionStorage.setItem(‘uanme‘,‘Naruto‘);
// 读取数据
var name = sessionStorage.getItem(‘uname‘);
读取数据
- API 提供了更多的方法和属性来操纵项，使得代码变得更有用
- 属性
- length: 返回应用程序在存储空间中积累的项的数量
- 方法
- key(index):获取指定索引对应的项的键
删除数据
- API 中提供了两个方法可以删除项
- removeItem(key):根据项的键删除指定项
- clear(): 清空整个存储空间。每个项都被删除
三、localStorage
localStorage概述
- 在窗口会话期间有一个可靠的系统来存储，在某些情况下可能有用。但是，想在Web上模拟强大的桌面应用程序，则一个临时的数据存储系统就不够用
- 为了解决这个问题，API提供了另外一个系统，为每个来源保留一个存储系统，并保持信息持久可用---localStorage
- 利用localStorage，可以保存大量数据，并由用户决定信息是否可用，是否保留
- localStorage与sessionStorage拥有相同的接口，所以sessionStorage的方法和属性对于localStorage都有效
storage事件
- 由于localStorage向加载同一程序是打开的每个窗口都提供信息，所以产生了至少两个问题:
- 各个窗口间如何通信
- 如何更新当前没有活动或没有得到焦点的窗口信息
- 为解决以上两个问题，API提供了storage事件
- storage事件:存储空间每次发生变化时，都会触发这个事件。所以可以通过这个事件通知同一程序的每个窗口
- 语法:
- window.addEventListener(‘storage‘,updateNum,false);
总结：本章内容主要介绍了下 HTML5 Web存储API (两个存储系统、sessionStorage、localStorage)
本文出自 “技术交流” 博客，谢绝转载！
Html5之高级-13 Web存储API (两个存储系统、sessionStorage、localStorage)
原文地址：http://jasonteach.blog.51cto.com/5192112/1758578
