HTML5本地存储规范中,定义两个API
1)Web Storage
2)本地数据库 Web SQL Database
以下主要介绍Web Storage:
Web Storage的作用是在网站中把有用的信息存储到本地的计算机或者移动设备上,根据实际需求从本地获取信息。
Web Storage提供两种存储类型API接口:sessionStorage和localStorage。(sessionStorage在会话期间有效,localStorage永久存储在本地)
(注:大部分游览器目前都是这种特性)
代码严谨性:使用之前检查游览器是否支持Web Storage
if(window.localStorage){
}
if(window.sessionStorage){
}
代码安全性:localStorage是域内安全的。(但各个游览器之间的数据是独立的)
localStorage属性:length
localStorage方法:setItem和getItem方法——赋值和取值
removeItem方法删除一个key/value对
clear方法删除所有的键值对
localStorage.setItem("name","啦啦啦");
localStorage.getItem("name");
//如果localStorage存储列表中只存在一个item,可以通过index去读取name值
localStorage.key(1);
//删除指定key为“name”的item
localStorage.removeItem("name");
//删除localStorage所有key/value键值对items
localStorage.clear();
Storage 事件监听
HTML5 Web Storage API 内置的事件监听器能对数据进行监听。
Storage事件的借口代码如下所示:
interface StorageEvent:Event {
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage?storageArea;
void initStrageEvent(in DOMString typeArg,
in boolean canBubbleArg,
in boolean cancelableArg,
in DOMString keyArg,
in DOMString oldValueArg,
in DOMString newValueArg,
in DOMString urlArg,
in Storage storageAreaArg);
};
- key属性表示存储中的键名
- oldValue属性:数据更新前的键值(如果数据是新添加的,该值为null)
- newValue属性:数据更新后的值(如果数据通过removeItem删除,该值为null)
若调用clear方法,则key、oldValue和oldValue的值都是null
- url属性:记录Storage时间发生时的源地址
- StorageArea属性指向事件监听对应的Storage对像
storage原意为仓库、储藏间 , StorageArea则很形象的指向这个仓库对应的位置或者说空间