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

最新推荐文章于 2022-11-11 09:02:30 发布

count2014

最新推荐文章于 2022-11-11 09:02:30 发布

阅读量211

点赞数

分类专栏： java 文章标签： Web存储客户端存储 Cookie

本文链接：https://blog.csdn.net/weixin_36997847/article/details/78165884

版权

java 专栏收录该内容

48 篇文章 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。在新打开的页签中修改字段值，然后返回原来的页签，你就会看到关于事件本身的消息了