《学习笔记》之HTML--LocalStorage

时间:2022-08-26 08:27:09
参考书籍:《JavaScript 权威指南----ECMAScript5+HTML5DOM+HTML5BOM》编著:张亚飞

1.什么是Web存储?

Web存储机制是一种通过字符串形式的 key/value 对来安全地存储和使用客户端数据的方法。在HTML5之前,Web存储先后出现了Cookie,IE的userData,Flash,Google的Gears等多种解决方案,以下是一张网上的图片,能够很好地展示web存储的这一发展历程。 《学习笔记》之HTML--LocalStorage
《学习笔记》之HTML--LocalStorage HTML5对web存储进行了规范和统一,提出了一种新的Storage存储方式,并把它分为以下两种 -本地存储(localStorage) 没有时间限制的数据存储。 -会话存储(sessionStorage) 针对一个会话期的数据存储。 在使用 Storage 存储前,应检查浏览器是否支持 localStorage 和 sessionStorage。
//以下函数用来检测浏览器是否支持localStorage和sessionStorage
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return false;
}
}
//以下是storageAvailable函数的用法
//检测是否支持sessionStorage,调用sessionStoragestorageAvailable('sessionStorage')
if (storageAvailable('localStorage')) {
// 浏览器支持localStorage
}
else {
// 浏览器不支持localStorage
}
各大主流浏览器对localStorage支持情况如下图。 《学习笔记》之HTML--LocalStorage
《学习笔记》之HTML--LocalStorage

2.localStorage、sessionStorage、Cookie和Session

localStorage 用于在客户端持久存储数据,除非主动删除数据,否则数据是永远不会过期的。 sessionStorage 用于在会话期间存储数据,被存储的数据只有在同一个会话中的页面才能访问,并且当会话结束后数据也会随之销毁。 与Cookie相比,localStorage有以下优势: -每个Cookie最多只能存储4KB信息,而官方建议的localStorage的大小为5M。 -每个域下可创建的Cookie数量有限制(IE6下至多存储20个Cookie),localStorage对数据条数无限制。 -原生的cookie接口并不友好,程序员需重新封装,localStorage提供了方便的数据操作接口。 -Cookie的内容会随页面请求在服务器和客户端之间来回传递,占用带宽资源,传输效率低,而localStorage内存储的数据不会被发送到服务器端 -Cookie存在安全性问题,如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。 localStorage的局限: 1、各浏览器的localStorage大小不统一,并且IE只在IE8以上版本才支持localStorage。 2、localStorage只能存储字符串,任何格式的数据在存储的时候都会被自动转为字符串,所以读取的时候,需要进行类型的转换。 3、localStorage本质上是对字符串的存储和读取,存储数据会消耗浏览器的内存空间,存储数据多的情况下,会影响浏览器响应效率。 4、localStorage在浏览器的隐私模式下是不可读取的。 5、localStorage不能被爬虫抓取到。 另外,sessionStorage和服务端 Session存储也不相同,sessionStorage存储区域存储在客户端计算机上。

3.Storage接口

HTML5规范规定了 WindowSessionStorage 和 WindowLocalStorage 接口,分别对应于 SessionStorage 和 LlocalStorage ,在这两个接口内分别定义了sessionStorage和localStorage属性。window实现了这两个接口,因此,可以使用window.sessionStorage和window.localStorage属性来处理SessionStorage和LlocalStorage。 window.sessionStorage和window.localStorage属性返回的数据类型都是Storage,支持HTML5的浏览器都实现了Storage接口,因此这两个属性都可以返回一个Storage对象。 Storage接口包含的属性和方法如下: 只读属性:Storage.length 返回存储在Storage对象内的 key/value 对的个数。 方法:Storage.key(n) 返回存储在Storage对象内的第 n 条数据的 key 。 Storage.getItem(key) 返回指定key的value。 Storage.setItem(key,value) 向Storage对象内添加或更新 key/value。 Storage.removeItem(key) 从Storage对象内删除指定 key/value。 Storage.clear() 从Storage对象内删除所有 key/value。

4.localStorage基本操作

使用window.localStorage属性可以获取与当前域对应的本地存储区域,其中存储的数据可以在当前域的多个页面和会话之间传递。 以下代码演示了如何使用localStorage进行本地存储:
var storage=window.localStorage; //获取当前域所对应本地存储区域
//使用setItem(key,value)方法向本地存储区域中写入数据
storage.setItem("visitedCount",1);
storage.setItem("visitedUser","pengjunlee");
storage.setItem("visitedPage","Using the Web Storage API");
//使用本地存储的length属性、key()和getItem()方法对存储的数据进行遍历显示
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i);
var value = storage.getItem(key);
alert(value); //三次依次输出:1,Using the Web Storage API ,pengjunlee
}
storage.setItem("visitedUser","A Gentleman");//使用setItem(key,value)方法更新visitedUser的值
alert(storage.getItem("visitedUser"));//输出 A Gentleman
storage.setItem("visitedTime",new Date().toUTCString());//使用setItem(key,value)添加新建visitedTime
storage.removeItem("visitedPage");//使用removeItem(key)方法删除指定的键/值对
//使用本地存储的length属性、key()和getItem()方法对存储的数据再次进行遍历显示
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i);
var value = storage.getItem(key);
alert(value); //三次次依次输出:1,Sat, 05 Nov 2016 15:08:28 GMT,A Gentleman
}
storage.clear();//使用clear()方法清除所有的键/值对
alert(storage.length);//输出 0
以下是在Chrome浏览器中截取的代码中两次遍历时LocalStorage的数据存储情况。 《学习笔记》之HTML--LocalStorage
《学习笔记》之HTML--LocalStorage
localStorage不但可以用自身的setItem(),getItem()等方法方便存取,还可以像普通的JavaScript对象一样使用点 . 操作符,及以 [] 的方式进行数据存储,例如下面的代码:
var storage=window.localStorage; //获取当前域所对应本地存储区域
//使用点 . 操作符,及 [] 方式向本地存储区域中写入数据
storage.visitedCount=1;
storage.visitedUser="pengjunlee";
storage["visitedPage"]="Using the Web Storage API";
//使用本地存储的length属性、key()和[]方式对存储的数据进行遍历显示
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i);
var value = storage[key];
alert(value); //三次依次输出:1,Using the Web Storage API ,pengjunlee
}

5.storage事件

当使用的存储区域内容发生变化时还可能触发storage事件,使用window.onstorage可以捕获该事件。例如下面的代码:
var storage=window.localStorage;
(function(){
window.addEventListener("storage",function storageHandler(event){
var myDiv=document.getElementById("myDiv");
myDiv.innerHTML="存储发生了变化:<br/><b>"+
event.key+"</b>键改变了<br/>旧值<b>"+
event.oldValue+"</b>被改变为新值<b>"+
event.newValue+"</b><br/>发生更改所在的网址:<b>"+
event.url+"</b>";
});
})()
执行Storage.setItem()、Storage.removeItem() 和Storage.clear()方法都可以触发该事件,对于前面的范例,如果storage中的键值发生变化,会返回类似如下图所示的结果。 《学习笔记》之HTML--LocalStorage
Event事件对象可以获取的属性如下: (1)属性key,表示被更改键。 (2)属性oldValue,表示被更改的键的旧值。 (3)属性newValue,表示被更改的键的新值。 (4)属性url,表示发生更改所在的网址。 (5)属性storageArea,表示发生更改所在的Storage对象。 需要注意的是: (1)IE使用storagecommit事件替代了storage事件,它使用XML文件存储localstorage,并且IE的localstorage并不支持本地文件,所以需要将以上测试代码所在页面部署到TomCat服务器上进行测试。 (2)当storage发生改变的时候,会触发当前域下所有非当前页面的storage事件(IE除外,IE的storagecommit事件会触发当前域下所有页面的storagecommit事件)。
《学习笔记》之HTML--LocalStorage