面试题201412——html5 本地存储

作者：zccst

一、LocalStorage和sessionStorage

2015-3-27第二个坑

惊呆的事实：不管是Boolean，还是Number，还是其他类型，一律转为String存储。

localStorage.setItem('aa',false);

localStorage['aa']===false;//false

localStorage['aa']==="false";//true

也即是存储在localStorage后，将布尔型数据改成字符串了。

同理：

localStorage.a=0;

localStorage.a;//"0"

localStorage.a==="0";//true

localStorage.a===0;//false

Boolean("false");//true

2015-3-20

存储数据Window.localStorage.setItem(key,value)

读取数据Window.localStorage.getItem(key)

删除数据项Window.localStorage.removeItem(key)

删除所有数据Window.localStorage.clear()

通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本

例如：

localStorage.key={value1:"value1"};

localStorage.key.value1='a';

这里是无法对实际存储的值产生作用的，下面的写法也不可以：

localStorage.getItem("key").value1="a";

还有Storage，GlobalStorage

在IE8之前版本也可以使用,叫做"userDatabehavior"

interfaceStorage{

readonlyattributeunsignedlonglength;

[IndexGetter]DOMStringkey(inunsignedlongindex);

[NameGetter]DOMStringgetItem(inDOMStringkey);

[NameSetter]voidsetItem(inDOMStringkey,inDOMStringdata);

[NameDeleter]voidremoveItem(inDOMStringkey);

voidclear();

};

推荐使用getItem(key),setItem(key,data);

需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的.toString方法被转换成字符串。所以一个普通对象将会被存储为"[objectObject]"，而不是对象本身或者它的JSON形式。使用浏览器自身提供的JSON解析和序列化方法来存取对象是比较好的，也是比较常见的方法。

区别：

sessionStorage是个全局对象，它维护着在页面会话(pagesession)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。

例子：自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。

// 获取到我们要循环保存的文本域
 var field = document.getElementById("field");
 
 // 查看是否有一个自动保存的值
 // (只在浏览器被意外刷新时)
 if ( sessionStorage.getItem("autosave")) {
    // 恢复文本域中的内容
    field.value = sessionStorage.getItem("autosave");
 }
 
 // 每隔一秒检查文本域中的内容
 setInterval(function(){
    // 并将文本域的值保存到session storage对象中
    sessionStorage.setItem("autosave", field.value);
 }, 1000);

Storage事件：

对Storage对象进行任何修改，都会在文档上触发事件。这个事件的event对象属性有：

domain：域名

key：设置或删除的键名

newValue新值

oldValue旧值

EventUtil.addHandler(document,"storage",function(event){

alert(event.domain);

});

更多关于localStorage的信息，还可以参考：

http://zccst.iteye.com/blog/2194344

二、IE下userData

首先<divstyle="behavior:url(#default#userData)"id="dataStore"></div>

然后就可以使用setAttribute()方法在上面保存数据了，例如

varo=document.getElmentById("dataStore");

o.setAttribute("name","Nicholas");

o.setAttribute("book","JavascriptBook");

o.save("BookInfo");

取信息

o.load("BookInfo");

o.getAttribute("name");

o.getAttribute("book");

删除信息

o.removeAttribute("name");

o.save("BookInfo");

三、离线检测

navigator.onLine

EventUtil.addHandler(document,"online",function(event){

alert("Online");

});

EventUtil.addHandler(document,"offline",function(event){

alert("Offline");

});

轮询

四、应用缓存

描述文件manifestfile列出要下载和缓存的资源。例如：

CACHEMANIFEST

#Comment

file.js

file.css

<htmlmanifest="/offline.manifest">描述文件，这个mime是text/appcache

这个API核心是applicationCache对象，有一个status属性，值是常量，分别是：

0,无缓存

1,闲置

2,检查

3，下载中

4，更新完成

5，废弃

相关事件：

checking

error

noupdate

downloading

progress

updateready下载完毕

cached

一般依次触发以上事件。但也可以手工干预直接调用applicationCache.update();

如果您觉得本文的内容对您的学习有所帮助，您可以微信：