JavaScript权威指南读书笔记——第二十章客户端存储

最新推荐文章于 2022-10-26 09:24:45 发布

qq_32645931

最新推荐文章于 2022-10-26 09:24:45 发布

阅读量261

点赞数 2

分类专栏：读书笔记

本文链接：https://blog.csdn.net/qq_32645931/article/details/77838648

版权

读书笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

localStorage和sessionStorage

Window对象定义了两个属性：localStorage和sessionStorage。这两个属性都代表一个Storage对象。localStorage和sessionStorage两者的区别在于存储的有效期和作用域的不同。

//存储
localStorage.username = 'username';
//获取
var username = localStorage.username;
//迭代
for (var name in localStorage){
    var value = localStorage[name];
}

浏览器如果仅仅支持存储字符串类型数据的话就需要将其他数据类型进行编码和解码。

存储有效期和作用域

localStorage的作用域限定在文档源级别。文段源是通过协议、主机名以及端口三者来确定的。同源的文档间贡献同源的localStorage数据。localStorage的作用域也受浏览器供应商限制。

sessionStorage的作用域也限定在文档源中，sessionStorage的作用域还被限定在窗口中。

sessionStorage指的窗口是顶级窗口。如果一个浏览器标签页包含两个<iframe>元素，它们所包含的文档是同源的，那么两者之间是可以共享sessionStorage的。

存储API

//存储
localStorage.setItem("x",1);
//获取
var x = localStorage.getItem("x");
//遍历
for (var i = 0; i < localStorage.length; i++){
    //获取第i个名字
    var name = localStorage.key(i);
    //获取该对的值
    var value = localStorage.getItem(name);
}
//删除
localStorage.removeItem("x");
//全部删除
localStorage.clear();

存储事件

可以给Window对象设置onstorage属性，Firefox不支持该属性。

与存储事件相关的事件对象的属性。

key
- 被设置或移除的项的名字或键名。
newValue
- 保存该项的新值。
oldValue
- 改变或删除该项前，保存该项原先的值。
storageArea
- 相当于Window对象的localStorage属性或sessionStorage属性
url
- 触发该存储变化脚本所在文档的URL

cookie属性：有效期和作用域

cookie默认的有效期很短暂，只持续在Web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就丢失了。如果想延长cookie的有效期，可以通过设置max-age属性。

cookie可以设置path和domain来指定作用域。

保存cookie

cookie属性设置为一个字符串形式的值：

name=value

funciton setcookie(name,value,daysToLive){
    var cookie = name + "=" + encodeURIComponent(value);
    //将daysToLive设置为cookie的存活时间
    if (typeof daysToLive === "number")
        cookie += "; " + (daysToLive*60*60*24);
    //设置cookie
    document.cookie = cookie;
}

要改变cookie的值，需要使用相同的名字、路径和域，用新的值重新设置cookie的值。设置新max-age属性就可以改变原来的cookie的有效期。

要删除一个cookie，需要使用相同的名字、路径和域，然后指定一个任意（非空）的值，并将max-age属性指定为0，在设置cookie。

读取cookie

读取cookie属性的时候，其返回值是一个字符串。采用split()方法将cookie值中的名/值对都分离出来。

利用IE userData持久化数据

一旦给元素赋予“userData”行为，该元素就拥有load()和save()方法。

var memory = document.createElement("div");
memory.style.display = "none";
//附加userData行为
memory.style.behavior = 
"url(#default#userData)"
document.body.appendChild(memory);

应用程序存储和离线Web应用

应用程序缓存清单

首先要创建一个清单：包含所有应用程序依赖的的URL列表。然后，通过在应用程序主HTML页面的<html>标签中设置manifest属性，指向该清单文件。

清单文件中的首行内容必须以“CACHE MANIFEST”字符串开始。其余就是要缓存的文件URL列表，一行一个URL。注释是以“#”开始的行。

CACHE MANIFEST
# ......
myapp.html
myapp.js
myapp.css

应用程序缓存清单文件约定以.appcache作为文件扩展名。Web服务器真正识别清单文件的方式是通过“text/cache-manifest”这个MIME类型的清单。

复杂的清单
清单文件中可以使用特殊的区域头来标识该头信息之后清单的类型。上面的例子中实事上都属于“CACHE:”区域，也是默认区域。

“NETWORK:”区域标识了该URL从不缓存，总要通过网络获取。
“FALLBACK”区域中的清单项每行都包含两个URL。如果从网络中载入这样一个URL失败的话，就会使用第二个URL指定的缓存资源来代替。

CACHE MANIFEST

CACHE:
myapp.html

FALLBACK:
videos/ offline_help.html

NETWORK:
cgi/

缓存的更新

这里写图片描述