面试题201412——client 本地存储


一、LocalStorage 和 sessionStorage

还有Storage,GlobalStorage

在IE8之前版本也可以使用,叫做”userData behavior”

interface Storage {

  readonly attribute unsigned long length;

  [IndexGetter] DOMString key(in unsigned long index);

  [NameGetter] DOMString getItem(in DOMString key);

  [NameSetter] void setItem(in DOMString key, in DOMString data);

  [NameDeleter] void removeItem(in DOMString key);

  void clear();

};

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

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

区别:

sessionStorage 是个全局对象,它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着,页面会话周期就会一直持续。当页面重新载入(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);

});

二、IE下userData

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

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

var o = document.getElmentById(“dataStore”);

o.setAttribute(“name”, “Nicholas”);

o.setAttribute(“book”, “Javascript Book”);

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”);

});

轮询

四、应用缓存

描述文件 manifest file 列出要下载和缓存的资源。例如:

CACHE MANIFEST

#Comment

file.js

file.css

<html manifest=”/offline.manifest”>描述文件,这个mime是text/appcache

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

0, 无缓存

1, 闲置

2, 检查

3,下载中

4,更新完成

5,废弃

相关事件:

checking

error

noupdate

downloading

progress

updateready 下载完毕

cached

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


6 responses on “面试题201412——client 本地存储

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>