cookie、localStorage 和sessionStorage

Cookie

1.什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
• 存储量4kb

2.cookie的工作机制，运作流程

• 客户端发送一个请求到服务器 → 服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 → 客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 → 服务器返回响应数据

cookie属性项

document.cookie="username=mxr; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
1

• 第一个参数为要设置的cookie键值对
• 第二个参数为设置过期时间
• path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面

创建一个可在 cookie 变量中存储访问者姓名的函数setCookies

// 这个函数中的参数存有 cookie 的名称、值以及过期天数。
// 在函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。
function setCookies(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays)
    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate
    .toGMTString()) + "path=/" + "httponly";
    var x = document.cookie;
    console.log(x + "----------")
    console.log(exdate + "----------")
}

1
2
3
4
5
6
7
8
9
10
11
12

我们要创建另一个函数来检查是否已设置 cookie：

//首先检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。
function getCookie(c_name){
	if(document.cookie.length > 0){
	  let c_start = document.cookie.indexOf(c_name+ "=");
	  if(c_start!= -1){
	    c_start = c_start + c_name.length+1
	    c_end = document.cookie.indexOf(";",c_start)
	    if(c_end == -1){
	      c_end = document.cookie.length
	      console.log(document.cookie.substring(c_start,c_end))
	      return unescape(document.cookie.substring("cookie:"+c_start,c_end))
	    }
	  }
	}
	console.log("没有设置cookie")
	return ""
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

最后，我们要创建一个函数，这个函数的作用是：如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。

//如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字
function checkCookie(){
   username = getCookie("username");
   if(username != "" && username != null ) {
     alert("欢迎回来，" + username + "!")
   } else {
     username = prompt("请填写你的名字：","")
     if(username != null && username !=""){
       setCookies("username", username, 365)
     }
   }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

3.读取cookie

var x = document.cookie;
1

4.修改cookie

• 重新为cookie赋值将会覆盖旧的cookie即完成修改

document.cookie="username=cxy; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
1

旧的 cookie 将被覆盖

5.删除cookie

• 将日期改为之前的日期即可完成删除

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
1

localStorage 和sessionStorage

localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。

• 这里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。

• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

• sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

1.生存期

• localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。

• sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

2.数据结构

• localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

const useStorage = (storageKey = "authorization") => {
    const localKey = `devpoint.local.${storageKey}`;

    const toJson = (str) => {
        try {
            return JSON.parse(str);
        } catch {
            return str;
        }
    };
    const toStringfy = (value)=>{
        try {
            return JSON.stringify(value);
        } catch {
            return value;
        }
    }

    const save = (data) => {
        window.localStorage.setItem(localKey, JSON.stringify(data));
    };

    const get = () => {
        const localData = window.localStorage.getItem(localKey);
        if (localData && localData !== "") {
            return toJson(localData);
        } else {
            return false;
        }
    };
    /**
     * Delete
     */
    const del = () => {
        window.localStorage.removeItem(localKey);
    };
    /**
     * 清除所有的 localStorage
     */
    const clear = () => {
        window.localStorage.clear();
    };
    // 返回存储对象处理方法
    return {
        save,
        get,
        del,
        clear,
    };
};
const storageAuth = useStorage();
const loginInfo = {
    username: "DevPoint",
    age: 30,
};
storageAuth.save(loginInfo);
console.log(storageAuth.get());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

3.API 不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

4.过期时间

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

• 很遗憾，localstorage原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现：

function set(key,value){
  var curtime = new Date().getTime();//获取当前时间
  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列
}
function get(key,exp)//exp是设置的过期时间
{
  var val = localStorage.getItem(key);//获取存储的元素
  var dataobj = JSON.parse(val);//解析出json对象
  if(new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
  {
    console.log("expires");//提示过期
  }
  else{
    console.log("val="+dataobj.val);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

容量限制
目前业界基本上统一为5M

在ios设备上无法重复setItem()

另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。

区别 localStorage、sessionStorage、cookie、IndexDB

• localStorage：完全存在于客户端（浏览器）中的键/值存储。用于存储不需要发送到服务器的身份验证 Token 或者离线数据。

• sessionStorage：一种键/值存储，其功能与 localStorage 类似，但在用户关闭页面时过期/清除，即使在同一域中也不会跨选项卡共享，最适用于存储临时数据。

• cookie：可以在浏览器中读取和写入的数据，但也会随着每个请求的 cookie header 中的传输到服务器。

• IndexDB：一个存在于浏览器中的数据库，单独使用有点困难，但与 PouchDB 等工具配合使用，可用于存储需要查询和性能要求的更复杂的客户端数据。