实用对比cookie、sessionStorage、localStorage

一、cookie

cookie是可以用来存储少量数据在本地的，默认情况下关闭浏览器后cookie数据就会被自动清除，仅关闭当前标签页并不会删除cookie。cookie是可读可写的。（cookie是用于客户端与服务端通信的）

cookie的注意事项：
1、不同的浏览器存放的cookie位置是不一样的，也不能通用
2、cookie的存储是以域名形式进行区分的。
3、cookie的数据可以设置它的名字，类似于json
4、一个域名下存放的cookie的个数是有限的，不同的浏览器存放的个数不一样，大概为20~50个不等
5、每个cookie存放的内容大小也是有限的，不同的浏览器存放大小不一样，大概为4KB左右
6、想长时间的存放cookie，则需要在设置cookie的时候同时给他设置一个过期时间expires
7、同域名下的同路径下的cookie名相同，那么设置它的多个值时后面会覆盖前面；但是同域名下cookie路径不同时，可以设置同名的cookie，不会被覆盖。
8、所有的http请求都会携带cookie（跨域不会携带），会影响获取资源的效率
Chrome浏览器：不允许存储cookie在本地，需要服务器环境才能进行存储cookie。（如果在本地进行测试可以使用火狐浏览器）
9、存储cookie的值是个字符串类型
10、同源http请求会默认都会携带cookie，会影响获取资源的效率

1、设置cookie

前端可以设置cookie，后端也可以设置cookie。各自设置的语法不一样。
cookie是document对象下面的一个属性，所以在访问cookie属性的时候应该写document.cookie

// 仅设置cookie数据，不设置过期时间
document.cookie = 'username=winne';  // 字符串拼接的方式设置
document.cookie = ["password", '=', "123456"].join('');  // 数组拼接为字符串的方式设置

/**
 * 设置cookie
 * @param {String} cookieName [必选] cookie名称
 * @param {String | Number} cookieValue [必选] cookie值
 * @param {Number} expires [非必选] 过期时间（天）
 */
function setCookie (cookieName, cookieValue, expires) {
  // getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数
  // new Date('时间戳') 方法返回的是Date 对象类型
  // toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果
  if (expires) {
    const expire = new Date((new Date()).getTime() + expires * 24 * 60 * 60 * 1000)
    document.cookie = `${cookieName}=${cookieValue};expires=` + expire.toGMTString()
  } else {
    document.cookie = `${cookieName}=${cookieValue}`
  }      
}

setCookie('age', 22, 6)
setCookie('name', 'winne')
setCookie('hi', JSON.stringify({ num: 1, age: '22' }))
setCookie('hi2', JSON.stringify([1, 2]))

注意：上面的方法中cookie数据只能一条一条设置，不能直接多个一起设置，expires是cookie内置的配置项，所以可以直接和数据一起同时设置。数据项和过期时间中间使用英文分号隔开。
在设置cookie的时候最好都使用字符串类型，因为在存进浏览器的时候就被强制转换为字符串类型了。所以取出cookie的时候也都是字符串类型。

如果要设置值为对象或者数组的话，使用JSON.stringify()方法。

2、获取完整cookie

我们通过document.cookie来获取当前网站下的cookie的时候，得到的是字符串形式的值，它包含了当前网站下的所有cookie，他会把所有的cookie通过一个（分号+空格）的形式串联起来。

// 我们打印获取到的所有cookie
console.log(document.cookie);
// 打印输出结果如下
// username=winne; password=123456

从上面的打印代码可以看出：每个cookie数据项是使用等号相连，等号前面为cookie名称，等号后面为cookie值。两两cookie数据项之间使用（分号+空格）分隔。

3、获取指定名称的cookie对应的值

3.1、我们根据document.cookie获取到的所有cookie的格式进行字符串分割取出自己想要的cookie值。

// 封装为一个函数，函数传入想要获取的cookie名称即可获取到对应的值
	function getCookie(name) {
            var arr1 = document.cookie.split('; ');  //先进行第一次分割（英文分号和空格）（得到cookie每一项的数组）
            for (var i = 0; i < arr1.length; i++) { //循环这个数组
                var arr2 = arr1[i].split('='); //在每一次循环中再通过等号分割数组每一项的字符串，对应得到cookie名和cookie值，再存到另外一个数组
                if (arr2[0] == name) {  //判断数组中的第一项是不是和我们传进来要找的cookie名一致
                    var cookieValue = arr2[1];
                    console.log(cookieValue)
                    return cookieValue; //一致的话就返回cookie值，注意是数组的第二项
                }
            }
        }
 getCookie("username");  // winne
 getCookie("password");  // 123456

3.2、通过正则表达式进行匹配获取到对应名称cookie的值

function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr !== null) {
            var cookieValue = arr[2]; //arr[2]为匹配到的cookie值
            console.log(cookieValue)
            return cookieValue ;            
        }
}
getCookie("username");  // winne
getCookie("password");  // 123456

4、移除cookie

expires指的是保存时间，如果时间比现在早的话，浏览器就会删除该cookie。
移除cookie函数，把要移出的cookie名传入，再把它的值置为空，然后过期时间设置为过去就行了。（这样就获取不到值了，然后关闭浏览器之后这项cookie就会被清除）

function removeCookie(name) {
	document.cookie = [name, '=', "", ";expires=", -1].join('');
}

二、sessionStorage

sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存少量的数据在本地，在关闭浏览器窗口或关闭当前标签页之后将会删除这些数据。 存储大小为5MB左右。
sessionStorage 都 是 window 对 象 下 的 子 对 象， 也 就 是 说window可以省略，sessionStorage.getItem() 其实是 window.sessionStorage.getItem() 的简写。

sessionStorage对象下面的方法：

//设置数据到sessionStorage
sessionStorage.setItem("username","winne");
sessionStorage.setItem("password","123456");

// 从sessionStorage获取名为username数据
var user = sessionStorage.getItem("username");
// 等价于 var user = sessionStorage.username;
console.log(user); // winne

// 获取sessionStorage的第一项数据
console.log(sessionStorage); // {password: "123456", username: "winne", length: 2}
// json排序默认是先数字后字母，字母从小到大排序
var value1 = sessionStorage.key(0);
var value2 = sessionStorage.key(1);
console.log(value1); // password
console.log(value2); // username

// 删除sessionStorage中的某个数据
sessionStorage.removeItem("username");
console.log(sessionStorage); // {password: "123456", length: 1}

// 清空sessionStorage
sessionStorage.clear();
console.log(sessionStorage); // {length: 0}

三、localStorage

localStorage用于持久化的本地存储少量数据在本地，除非主动删除数据，否则数据是永远不会过期的。 存储大小为5MB左右。
localStorage 是 window 对 象 下 的 子 对 象， 也 就 是 说window可以省略，localStorage.getItem() 其实是 window.localStorage.getItem() 的简写。

localStorage 对象下面的方法：
localStorage 对象下面的这些方法的用法和sessionStorage对象的方法的用法一致，所以这里将不再演示。

localStorage不主动删除或者清除缓存，那么将会永远保存数据在本地。

如何想设置localStorage在一定时间内有效请参考：
https://blog.csdn.net/m0_38134431/article/details/106122015

个人总结：

1、如果希望数据长久保存，不受关闭浏览器和关闭标签页的影响就使用localStorage保存数据。
2、如果希望数据在关闭浏览器后就清除改数据，建议使用sessionStorage保存数据，因为它的api方便操作。
3、如果希望数据在一定的时间内保存，不受关闭浏览器和关闭标签页的影响建议使用cookie进行存储数据。