        let date = new Date().getTime();
        let outTimer = date + 24 * 60 * 60 * 1000  //设置cookie一天以后过期
        let outDate = new Date(outTimer);
        document.cookie = "name = hello;expires=" + outDate;
        console.log(document.cookie);

在浏览器中打开开发者工具,在application下就可看到我们设置的cookie的过期时间.

因为我们设置的是cookie会在一天之后过期,所以在Expires中看到过期时间是2020-3-30 13:56:59...

注:在设置过期时间时不能小于当前时间,如果小于,则cookie会被自动清除.

        let date = new Date(0);
        console.log(date);
        document.cookie = "name = hello;expires=" + date;
        console.log(document.cookie)

可以很清楚的看到第二个打印的内容为空.

4.设置多个cookie

        let date = new Date().getTime();
        let outTimer = date + 24*60*60*1000;  //设置cookie一天以后过期
        let outDate = new Date(outTimer);
        document.cookie = "name = hello ; expires = " + outDate;
        document.cookie = 'password = 123456 ; expries = ' + outDate;
        console.log(document.cookie);

打印出两条cookie信息.

5.设置所有cookie的常用属性

属性	描述
Name	设置cookie的名称,该名称一旦确定便再不能更改
Value	该Cookie的值。如果值为Unicode字符，需要为字符编码。
Domain	可以访问该cookie的yuming(localhost)
Path	当前cookie的使用路径
Expires	设置cookie的过期时间
Max-Age	以秒为单位设置cookie的生存期
HttpOnly	告诉浏览器该cookie不能通过javaScript的document.cookie属性来访问
Secure	该Cookie是否仅被使用安全协议传输。安全协议。默认为false 如果不设置字段 cookie 可以通过http,https 协议加载设置如果设置这个字段, 那么只能通过https协议才能设置

2.本地存储

本地存储是HTML5中新增的特性,用来解决cookie存储空间不足的问题

1、概述：

对于Web Storage来说，实际上是Cookies存储的进化版。

背熟这句口诀：“两个接口，四个函数”。

2、两个接口四个函数：

（1）两个接口：分别是sessonStorage和localStorage

（2）四个函数：分别是setItem、getItem、removeItem和clear

1.Storage

1.1 Session Storage

session临时回话，从页面打开到页面关闭的时间段 ,窗口的临时存储，页面关闭，本地存储消失

临时存储就是存储一下,其他页面并不会共享

1.2 Local Storage

域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。

永久存储（可以手动删除数据）

多个页面可以共享

2.storage的特点

永久存储
存储量限制 ( 5M ) 客户端微型数据库
客户端完成，不会请求服务器处理
SessionStorage数据是不共享、 LocalStorage共享
浏览器不统一,并且在IE8以下不兼容
储存的值限定是字符串类型,需要我们通过JSON 对象去转换
存储内容多的话会消化内容空间,会导致变卡

3. storage的API

3.1 setItem(键名,键值)

设置数据(key,value)类型，类型都是字符串可以用获取属性的形式操作.

在本地客户端存储一个字符串类型的数据，其中，第一个参数“键名”代表了该数据的标识符，而第二个参数“键值”为该数据本身。

如

 localStorage.setItem("name", "hello");

3.2 getItem():

读取已存储在本地的数据，通过键名作为参数读取出对应键名的数据。如：获取数据，通过key来获取到相应的value.

如:

        localStorage.setItem("name", "hello");
        let c = localStorage.getItem("name");
        console.log(c)

打印的结果为name的value值:hello

3.3 removeItem():

移除已存储在本地的数据，通过键名作为参数删除对应键名的数据。

删除数据，通过key来删除相应的value

 localStorage.removeItem("name");

3.4 clear():

移除本地存储所有数据。删除全部存储的值.

localStorage.clear();

4.案例

<body>
    <button id="addData">添加数据</button>
    <button id="getData">获取数据</button>
    <button id="removeData">删除数据</button>
    <button id="clearData">清空数据</button>
    <input type="text" id="txt">
    <script>
        let addBtn = document.querySelector("#addData");
        let getBtn = document.querySelector("#getData");
        let reBtn = document.querySelector("#removeData");
        let clearBtn = document.querySelector("#clearData");
        let txt = document.querySelector("#txt");
        let arr = ['1','2','3'];
        let num = 0;
        //可根据需求切换Session Storage和local Storage
        addBtn.onclick = function () {
            let value = txt.value.trim();
            if(value) {
                sessionStorage.setItem(arr[num], txt.value);
            }
            num++;
            if(num > arr.length - 1) {
                num = 0;
            }
        }
        //获取name名为1的数据
        getBtn.onclick = function() {
            window.alert(sessionStorage.getItem('1'))
        }
        //删除name名为2的数据
        reBtn.onclick = function () {
            sessionStorage.removeItem('2')
        }
        
        clearBtn.onclick = function() {
            sessionStorage.clear();  
        }
    </script>
</body>

在这个案例中可以测试Session Storage和Local Storage中方法的具体效果,