面试题201412——html5 本地存储

zccst

浏览: 3322767 次
性别:
来自: 北京

最近访客更多访客>>

consy

snowstorm

净瞎扯

离氺的鱼

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

算法和面试题

JavaScript

作者：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之前版本也可以使用,叫做"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);
});

更多关于localStorage的信息，还可以参考：
http://zccst.iteye.com/blog/2194344

二、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();

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

分享到：

基于node+npm+grunt构建一个中型项目 | window.history

2014-12-23 14:58
浏览 765
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论