js权威指南——20章客户端存储

最新推荐文章于 2019-07-18 10:34:19 发布

lqy136362687

最新推荐文章于 2019-07-18 10:34:19 发布

阅读量112

点赞数

分类专栏： js权威指南——总结文章标签： web存储

本文链接：https://blog.csdn.net/lay136362687/article/details/81170557

版权

js权威指南——总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概括

客户端存储

web存储
- localStorage
- sessionStorage
cookie
UserData
离线web应用
文件系统API

20.1 localStorage和sessionStorage

存储有效期和作用域
- loacalStorage
  1. 通过localStorage存储的数据是永久的，除非刻意删除，将一直保留在用户的电脑上。
  2. localStorage的作用域限定在文档源级别，文档源是通过协议、主机名以及端口三者确定的。
  3. 同源的文档间共享同样的localStorage数据
- sessionStorage
  1. 有效期与存储数据的脚本所有最顶层的窗口或是浏览器标签页是一样的，若窗口或标签页被永久关闭，那么通过sessionStorage存储的数据也都被删除。
  2. 作用域限定在文档源中，同时限定在不同的标签页中，他么拥有各自的sessionStorage数据。不能互相读取，或互相覆盖
  3. 仅当标签页相同且同源文档共享数据
存储API

localStorage.setItem('x',1);//设置
localStorage.getItem('x');//1
localStorage.key(0);//x
localStorage.removeItem('x');//删除
localStorage.clear();//清空

在不支持web存储浏览器中

var memory=window.localStorage||
(window.UserDataStorage&&new UserDataStorage())||
new cookieStorage();
var username=memory.getItem('username');

事件
当存储发生真实的改变会在其他对该数据可见的窗口对象上触发事件，（更改数据的窗口不可见）
localStorage和存储事件采用广播机制，对所有窗口发送消息

cookie数据会自动在web浏览器与web服务器之间传输，因此服务端脚本可以读，写存储在客户端的cookie值。js使用cookie不会有任何加密机制，因此不安全。

有效期和作用域
有效期
1. cookie默认的有效期很短，只能持续在web浏览器的会话期间，一旦浏览器关闭，则cookie丢失（整个浏览器，而非窗口）。
2. 可以通过设置max-age属性延长cookie的有效期。
作用域
1. 通过文档源和文档路径来确定。如果在http://www.example.com/a/index.html创建一个cookie，cookie在http://www.example.com/a/order.htm可见，在http://www.example.com/b/index.html不可见。
2. cookie路径可以改变
3. secure，一般是不安全的形式（http）。若标志为安全只能通过安全的协议连接才能传递它（如https）；
保存cookie

function setCookie(name,value,daysToLive){
    var cookie=name+"="+encodeURIComponent(value);
    if(typeof daysToLive==="number")
        cookie+=";max-age="+(daysToLive*60*60*24);
    document.cookie=cookie;
}
//;path="/"
//;domain=""
//;secure

cookie的局限性
浏览器不允许保存超过300个cookie，为每个web服务器保存的cookie不能超过20个。每个cookie的数据不能超过4kb

20.3 IE userData

在IE5及IE5及以上版本的浏览器是通过在document元素后面附加一个专属的”DHTML行为”来实现客户端存储的

//创建userData
var memory=document.createElement("div");
memory.id="_memory";
memory.style.display="none";
memory.style.behavior="url('#default#userData')";
document.body.append(memory)
//存储和设置
memory.load("myStoredData");
var name=memory.getAttribute("username");
if(!name){
    name=prompt("what is your name");
    memory.setAttribute("username",name);
    memory.save('myStoredData');
}
//设置有效期
var now=(new Date()).getTime();
var expires=now+100*24*60*60*1000;
expires=new Date(expires).toUTCString();
memory.expires=expires;

userData作用于同级目录，存储空间比cookie大，小于localStorage和sessionStorage

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

H5新增”应用程序缓存”，允许web应用将应用程序自身保存到用户的浏览器中。（html，css，js，图片等）；

应用程序缓存清单

创建一个清单：包含所有应用程序依赖的所有URL列表。
通过在应用主HTML页面的标签中设置manifest属性。

<!DOCTYPE HTML>
<html manifest="myapp.appcache">
<head></head>
<body></body>
</html>

清单

    CACHE MANIFEST
    myapp.html
    myapp.js
    myapp.css
    images/background.png

服务器识别清单采用”text/cache-manifest”
清单文件可以使用特殊的区域头来标识该信息头之后的清单类型

CACHE：
```
    默认区域
```

NETWORK：

    标识该url的资源从不缓存，通过网络获取。
    *：表示任何不在清单上的资源，浏览器通过网络加载

FALLBACK：

    每行包含两个url，第一个url是一个前缀，任何能够匹配到该前缀的url都不会缓存。
    若载入第一个URL失败，则从第二个url指定的缓存资源来代替。

缓存的更新

在在线状态下，浏览器会异步的检查清单文件是否有更新。（不会检查缓存的文件是否有更新）
更新清单文件之后，用户必须载入应用两次才能保证最新的版本生效

更新缓存触发事件，触发事件的对象为window.applicationCache

checking 检查清单
noupdate 不更新
downloading 更新
progress 更新过程中
cached 首次下载缓存
updateready 更新缓存
error 离线状态检查清单失败或为缓存应用引用一个不存在的清单文件
obsolete 缓存应用程序，引用不存在的清单文件将应用程序从缓存中移除

离线web应用

navigator.onLine检测是否在线

lqy136362687

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录