大一菜鸟JavaScript学习之路（五）localStorage、sessionStorage、cookie的区别

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

localStorage、sessionStorage、cookie的区别

都是在开发中用到的临时存储客户端会话信息或者数据的方法

一、存储的时间有效期不同

cookie的有效期是可以设置的，默认情况是关闭浏览器后失效
sessionStorage的有效期是仅保持在当前页面，关闭当前会话或者浏览器后就会失效
localStorage的有效期是在不进行手动删除的情况下是一直有效的

让localStorage存储具备有效期的值--通过class封装一个方法

// 封装方法，给localStorage设置有效期
class Storage{
    constructor() {
        this.name = 'Storage'    
    }
    // 设置存储
    // key:需要存储的数据
    // value:需要存储的数据
    // expres：过期时间，毫秒单位
    setItem(key,value,expires) {
        let obj = {
            value: value,
            expires: expires,//有效时间
            startTime:new Date().getTime()//记录存储数据的时间，转换为毫秒值存下来
        }
        // 判断是否设置了有效时间
        if (obj.expires) {
            // 如果设置了时间，把obj转换数据类型转换为字符串对象存起来
            localStorage.setItem(key,JSON.stringify(obj))
        }
        // 如果没有设置有效时间，直接把value值存进去
        else {
            localStorage.setItem(key,JSON.stringify(obj.value))
        }
    }
    // 获取存储数据
    getItem(key) {
        // 先定义一个变量临时存放提取的值
        let temp = JSON.parse(localStorage.getItem(key))
        // 判断有没有设置expires属性
        // 如果有，就需要判断是否到期了
        if (temp.expires) {
            let data = new Date().getTime()
            if (data - temp.startTime > temp.expires) {
                // 此时说明数据已过期,清除掉
                localStorage.getItem(key)
                // 直接return
                return
            }
            else {
                // 如果没有过期就输出
                return temp.value
            }
        }
        // 如果没有设置，直接输出
        else {
           return temp 
        }
    }
}

二、存储的大小不同

cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息
localStorage和sessionStorage的存储容量是5Mb（不同浏览器有差异）

三、与服务端通信

cookie会参与到与服务端的通信中，一般会携带在http请求头部中，例如一些关键密匙验证等
localStorage和sessionStorage是单纯的前端储存，不参与与服务端通信

四、读写操作的便捷程度

cookie的创建【修改与创建一样，创建同样名称会覆盖之前】

document.cookie = "usename=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"
//expires后面跟的是过期时间（UTC或GMT）
//使用path参数告诉浏览器cookie的路径

cookie的读取
```
var x = document.cookie;
```
cookie的删除

//很简单，只要设置expires参数为以前时间即可
document.cookie = "usename=; expires=Thu, 01 Jan 1970 00:00:00 GMT;"

sessionStorage

存储一条数据

sessionStorage.setItem('数据名','数据值');

读取一条数据

let data = sessionStorage.getItem('数据名');

清除一条数据

sessionStorage.removeItem('数据名');

移除所有数据
```
sessionStorage.clear();
```

localStorage

存储一条数据

localStorage.setItem('数据名','数据值');

读取一条数据

let data = localStorage.getItem('数据名');

清除一条数据
```
localStorage.removeItem('数据名');
```
移除所有数据
```
localStorage.clear();
```

五、对于浏览器的支持

cookie出现时间较早，目前见到的浏览器都支持
localStorage和sessionStorage出现的时间较晚，（比如ie8以下版本不支持）