【JavaScript】JS红宝书笔记

野性酷女 2022-04-16 06:11 200阅读 0赞

### 1，离线检测 ###

1，开发离线应用的第一步是要知道设备是在线还是离线，HTML5为此定义了一个 navigator.onLine属性，这个属性值为 true 表示设备能上网，值为 false 表示设备离线。
        2，除 navigator.onLine 属性之外，为了更好地确定网络是否可用，HTML5 还定义了两个事件：online 和 offline 。当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件。这两个事件在 window 对象上触发。

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

### 2， 应用缓存 ###

1，HTML5 的应用缓存（application cache），或者简称为 appcache，是专门为开发离线 Web 应用而设计的。Appcache 就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。
        比如：CACHE MANIFEST #Comment file.js file.css
        2，要将描述文件与页面关联起来，可以在 <html> 中的 manifest 属性中指定这个文件的路径，例如：<html manifest="/offline.manifest"> 以上代码告诉页面， /offline.manifest 中包含着描述文件。这个文件的 MIME 类型必须是text/cache-manifest
        3，虽然应用缓存的意图是确保离线时资源可用，但也有相应的 JavaScript API 让你知道它都在做什么。这个 API 的核心是 applicationCache 对象，这个对象有一个 status 属性，属性的值是常量，表示应用缓存状态。

### 3， 数据存储 ###

1，http是无状态协议，不能保存用户的状态和信息，于是出现了持久客户端状态：HTTP Cookies
        2，cookie有一些额外信息，如
            1. 限制
                cookie 在性质上是绑定在特定的域名下的。当设定了一个 cookie 后，再给创建它的域名发送请求时，都会包含这个 cookie。
                Firefox 限制每个域最多 50 个 cookie。Opera 限制每个域最多 30 个 cookie。Safari 和 Chrome 对于每个域的 cookie 数量限制没有硬性规定。
                当超过单个域名限制之后还要再设置 cookie，浏览器就会清除以前设置的 cookie。
                浏览器中对于 cookie 的尺寸也有限制。大多数浏览器都有大约 4kb的长度限制。
            2. cookie 的构成
                名称：一个唯一确定 cookie 的名称。cookie 名称是不区分大小写的
                域：cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个 cookie 信息。这个值可以包含子域（subdomain，如 www.wrox.com ）
                路径：对于指定域中的那个路径，应该向服务器发送 cookie。例如，你可以指定 cookie 只有从http://www.wrox.com/books/ 中才能访问，那么 http://www.wrox.com 的页面就不会发送 cookie 信息，即使请求都是来自同一个域的。
                失效时间：表示 cookie 何时应该被删除的时间戳。默认情况下，浏览器会话结束时即将所有 cookie 删除
                安全标志：指定后，cookie 只有在使用 SSL 连接的时候才发送到服务器。例如，cookie 信息只能发送给 https://www.wrox.com ，而 http://www.wrox.com 的请求则不能发送 cookie
            尤其要注意，域、路径、失效时间和 secure 标志都是服务器给浏览器的指示
            3. JavaScript 中的 cookie
                在JavaScript获取cookie： document. cookie属性。
            4. 子 cookie
                为了绕开浏览器的单域名下的 cookie 数限制，一些开发人员使用了一种称为子 cookie（subcookie）的概念。子 cookie 是存放在单个 cookie 中的更小段的数据。也就是使用 cookie 值来存储多个名称值对儿。子 cookie 最常见的的格式如下所示：
                name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5
            5. 关于 cookie 的思考
                还有一类 cookie 被称为“HTTP 专有 cookie”。设置HttpOnly头，HTTP 专有 cookie 可以从浏览器或者服务器设置，但是只能从服务器端读取，因为 JavaScript 无法获取 HTTP 专有 cookie 的值。

### 4，web存储机制：Web Storage ###

1，Web Storage 的目的是克服由 cookie 带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage 的两个主要目标是：
            提供一种在 cookie 之外存储会话数据的途径；
            提供一种存储大量可以跨会话存在的数据的机制
        2，最初的 Web Storage 规范包含了两种对象的定义： sessionStorage 和 globalStorage （在H5中变成localStorage）。
        3，Storage 类型
            Storage 类型提供最大的存储空间（因浏览器而异）来存储名值对儿。 Storage 的实例与其他对象类似，有如下方法。

clear() ： 删除所有值；
    getItem(name) ：根据指定的名字 name 获取对应的值。
    key(index) ：获得 index 位置处的值的名字。
    removeItem(name) ：删除由 name 指定的名值对儿。
    setItem(name, value) ：为指定的 name 设置一个对应的值

4，sessionStorage 对象
            sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象就像会话 cookie，也会在浏览器关闭后消失。存储在 sessionStorage 中的数据可以跨越页面刷新而存在
            存储在 sessionStorage 中的数据只能由最初给对象存储数据的页面访问到，所以对多页面应用有限制。
        5， globalStorage 对象，有同源策略，是依据发起请求的页面的域名、协议和端口来限制的
            作为最初的 Web Storage 规范的一部分，这个对象的目的是跨越会话存储数据，但有特定的访问限制。要使用 globalStorage ，首先要指定哪些域可以访问该数据。可以通过方括号标记使用属性来实现，如以下例子所示。

//保存数据
    globalStorage["wrox.com"].name = "Nicholas";
    //获取数据
    var name = globalStorage["wrox.com"].name;

在这里，访问的是针对域名 wrox.com 的存储空间。 globalStorage 对象不是 Storage 的实例，而具体的 globalStorage["wrox.com"] 才是。这个存储空间对于 wrox.com 及其所有子域都是可以访问的。
            某些浏览器允许更加宽泛的访问限制，比如只根据顶级域名进行限制或者允许全局访问，如下面例子所示:

/存储数据，任何人都可以访问——不要这样做！
    globalStorage[""].name = "Nicholas";
    //存储数据，可以让任何以.net 结尾的域名访问——不要这样做！
    globalStorage["net"].name = "Nicholas";
    虽然这些也支持，但是还是要避免使用这种可宽泛访问的数据存储，以防止出现潜在的安全问题。

6，localStorage 对象
            与 globalStorage 不同，不能给 localStorage 指定任何访问规则；规则事先就设定好了。要访问同一个 localStorage 对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。这相当于 globalStorage[location.host] 
        7， storage 事件
            对 Storage 对象进行任何修改，都会在文档上触发 storage 事件。当通过属性或 setItem() 方法保存数据，使用 delete 操作符或 removeItem() 删除数据，或者调用 clear() 方法时，都会发生该事件。
        8， 限制
            对于 localStorage 而言，大多数桌面浏览器会设置每个来源 5MB 的限制。Chrome 和 Safari 对每个来源的限制是 2.5MB。而 
            对 sessionStorage 的限制也是因浏览器而异。有的浏览器对 sessionStorage 的大小没有限制，但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。IE8+和 Opera 对sessionStorage 的限制是 5MB。

### 5，IndexedDB 在浏览器中保存结构化数据的一种数据库 ###

1，IndexedDB 的思想是创建一套 API，方便保存和读取 JavaScript 对象，同时还支持查询及搜索。
        2，IndexedDB设计的操作完全是异步进行的。因此，大多数操作会以请求方式进行，但这些操作会在后期执行，然后如果成功则返回结果，如果失败则返回错误。
        3，IndexedDB最大的特色是使用对象保存数据，而不是使用表来保存数据。
        4，限制。对 IndexedDB 的限制很多都与对 Web Storage 的类似。首先，IndexedDB 数据库只能由同源（相同协议、域名和端口）页面操作，因此不能跨域共享信息。换句话说， www.wrox.com 与 p2p.wrox.com的数据库是完全独立的。
        5，每个来源的数据库占用的磁盘空间也有限制。Firefox 4+目前的上限是每个源 50MB，而Chrome 的限制是 5MB。移动设备上的 Firefox 最多允许保存 5MB，如果超过了这个配额，将会请求用户的许可。