面试题201412——html5 本地存储

最新推荐文章于 2024-01-31 11:11:10 发布

zccst

最新推荐文章于 2024-01-31 11:11:10 发布

阅读量179

点赞数

分类专栏：算法和面试题文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/zccst/article/details/84692524

版权

算法和面试题专栏收录该内容

17 篇文章 0 订阅

订阅专栏

作者：zccst

[b]一、LocalStorage 和 sessionStorage[/b]
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的信息，还可以参考：
[url]http://zccst.iteye.com/blog/2194344[/url]

[b]二、IE下userData[/b]
首先 <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");

[b]三、离线检测[/b]
navigator.onLine

EventUtil.addHandler(document, "online", function(event){
alert("Online");
});
EventUtil.addHandler(document, "offline", function(event){
alert("Offline");
});

轮询

[b]四、应用缓存[/b]
描述文件 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();

如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]

zccst

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题201412——html5 本地存储

作者：zccst[b]一、LocalStorage 和 sessionStorage[/b]2015-3-27 第二个坑惊呆的事实：不管是Boolean，还是Number，还是其他类型，一律转为String存储。localStorage.setItem('aa', false);localStorage['aa'] === false; //falselocal...
复制链接

扫一扫