《客户端存储技术》读书笔记1

港控/mmm° 2022-06-07 02:22 159阅读 0赞

## 一、基础知识    ##

## 1.除了设置Cookie出现的地方，还可以指定Cookie的有效时间，有以下选项： ##

##      1.1只在当前会话期间存在的Cookie(从根本上说是直到浏览器关闭); ##

##       1.2永远存在的Cookie； ##

##        1.3存在特定时长的Cookie； ##

##        1.4特定时间点之后失效的Cookie; ##

## 2.使用Cookie ##

2.1Cookie没有API，要使用Cookie，只需要在代码中访问document.cookie对象。例：document.cookie = "nameOfCookie=value";

2.2值必须符合URL的编码规则，意味着若要动态定义Cookie，需要使用类似encodeURIComponent的辅助函数，例：

name = "Raymond Camden";

document.cookie = "name=" + encodeRUIComponent(name);

2.3document.cookie="name=Raymond";

document.cookie="age=43";

这段代码实际上创建了两个Cookie，这完全不符合逻辑，但我们必须适应这种定义方式。

2.4在Cookie值后面使用一个分号可以追加元数据。例：

document.cookie  = "name =Raymond;expires=Fri, 31 Dec 9999 23:59:59 GMT";

这个例子指明了Cookie何时过期。

2.5指定只对一个子域名有效：

document.cookie = "name =Raymond;expires=Fri, 31 Dec 9999 23:59:59 GMT；domain=app.foo.com";

2.6当不这样指定元数据时，Cookie默认只对当前域名的当前路径有效（你可能不希望这样），有效期是当前回话。

## 3.读取Cookie ##

3.1没有API可以用来读取“一个”Cookie。不过，你只需要简单的读取document.cookie就可以了。

3.2读取一个Cookie就意味着将字符串解析成多个由分号分隔的部分。另外还需注意，你无法访问任何元数据。

## 4.删除Cookie ##

4.1将过期时间设置成为过去的时间即可。例：

document.cookie = "name=Raymond; expires=Thu, 01 Jan 1970 00:00:00 GMT";

## 5.  使用开发者工具查看Cookie ##

5.1在Firefox中，你需要启动存储选项卡（Storage，默认情况下可能不显示）才能看到Cookie。Firefox不允许修改Cookie，只能查看。

## 二、使用Web存储 ##

### 1.Web存储/本地存储 ###

1.1本地存储的正式名称为“Web存储”；

1.2它不支持复杂数据（比如对象或数组），但你可以把这样的值预先编码成JSON，然后再存储。（显然，在检索时需要解码）；

1.3Web存储有两个版本：本地存储（Local Storage）和会话存储（Session Storage）。两者使用相同的API，但本地存储会持久存在（直到用户清除），而会话存储只要浏览器关闭就会消失。

1.4Web存储API官方规范的网址为：http://www.w3.org/TR/webstorage

1.5和Cookie类似，Web存储是与域名一一对应的。

1.6和Cookie不同的是，无法让app.foo.com 使用 www.foo.com 存储的数据。（可以借助iframe变通实现，但比较复杂）

1.7Web存储的限制没有一定之规，但一般为5-10M。

1.8如果超出了限制，Chrome,Firefox和Safari浏览器都会报告一个可以在代码中进行处理的错误。遗憾的是，Internet Explore 11 和Edge什么也不会做。

## 2.使用Web存储 ##

2.1Web存储API有如下4个简单的方法：

2.1.1 localStorage.setItem:设置特定键的值；

2.1.2  localStorage.getItem:检索特定键的值；

2.1.3  localStorage.removeItem:删除键及与其关联的值；

2.1.4 localStorage.clear:删除所有的键/值对（只限于发出请求的特定域名）

2.2注意：Web存储仅支持字符串数据。幸运的是，可以将复杂的数据转换成JSON，然后在获取值的时候通过解码进行还原，就可以轻松的将复杂的数据存入Web存储了。例：

var names = \["Ray","Jeanne"\];

localStorage.setItem("names",JSON.stringify(names));

将值重新读到数组里也非常简单：

var storedNmaes = JSON.parse(localStorage.getItem("names"));

为了确保此种方法有效，你需要记住什么键存储了什么类型的值。

## 3.监听存储变化 ##

3.1存储事件：存储（包括本地存储和会话存储）被修改时抛出的事件。

3.2示例代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>WebStorage Event Test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src =
        "http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    
    </head>
    <body>
    
        <form id="myForm">
        
            <p>
            Test Value:
            <input type="text" id="test">
            </p>
                
        </form>
    
        <script>        
        $(document).ready(function() {
            if(window.localStorage) {
        
                if(localStorage.getItem("testValue")) {
                    $("#test").val(localStorage.getItem("testValue"));
                }
                
                //Listen for all <input> fields and their input event
                $("input").on("input", function(e) {
                    var test = $("#test").val();
                    localStorage.setItem("testValue", test);
                    console.log("stored the test value.");
                });
                
                $(window).on("storage", function(e) {
                    console.log("storage event fired");
                    console.dir(e);
                });
                    
            }
                
        });
        </script>
    
    </body>
    </html>

存储事件只有在浏览器的另一个实例修改存储时，才会被触发。例：另外打开一个页签，输入相同的URL。在新打开的页签中修改字段值，然后返回原来的页签，你就会看到关于事件本身的消息了