本地缓存cookie的使用

本地存储主要有这几种：localStorage，sessionStorage和cookie。

面试常问点，这三种的区别是什么~

共同点：

都是保存在浏览器端、且同源的。

区别： 

1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。

4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

我这里的业务需求，使用cookie更加方便。cookie可以设置失效时间，方便数据短暂保存。

原本组件中对告警数据这块的处理是这样的：

if (properties.has("vehicleData")) {    this.vehicleInfo = [];    if (this.vehicleData) {        this.vehicleData.map((item) => {            this.vehicleInfo.push(item.plate);        });        if (this.vehicleInfo.length && this.ksign) {            window.console.log("告警车辆数据", this.vehicleInfo);            this.ksign.registerVehicleTrack(this.vehicleInfo);        }    }}

对后端推过来的告警数据vehicleData进行监听，在数据发生变化时，将新推送过来的这条数据塞入到一个数组中，因为AR的内置方法registerVehicleTrack需要参数是数组形式。

走缓存的话，就需要稍微改一改。在vehicleInfo 中拿到数据之后，不再直接传给AR的方法，而是先存入本地，也就是存入cookie中。

const expires = new Date();expires.setTime(expires.getTime() + 60 * 5000); // 当前时间的5分钟后失效if (this.vehicleInfo.length) {    document.cookie = `vehicleInfo=${this.vehicleInfo.toString()};expires=${expires.toUTCString()}`;    this.doRegister();}

在控制台Application中可以看到如下：

我把调用AR方法那段代码抽出来单独写成一个方法，因为不仅仅是监听后端数据这儿需要使用，需要刷新之后仍能正常调用，在组件初始化时也要调用，这样就可以保证后端数据即便没有推送的时候，也就是没有监听到vehicleData变化的时候，也可以拿到cookie中数据传给registerVehicleTrack。

// 调用AR车辆跟踪方法public doRegister() {    const vehicleList = this.getCookieValue("vehicleInfo");    if (vehicleList.length && this.ksign) {        window.console.log("告警车辆数据", vehicleList);        this.ksign.registerVehicleTrack(vehicleList);    }}

cookie中存入的值是字符形式，不是我这儿registerVehicleTrack需要的数组，所以需要读取cookie，并格式化数据。

// 读取cookie，返回数组形式public getCookieValue(name: string) {    const value = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)");    const result = value ? value.pop() : "";    let list: string[] = [];    if (result) {        if (result.indexOf(",") === -1) {            list = [result.toString()];        } else {            list = result.toString().split(",");        }    }    return list;}

这样就ok了，这里主要记录一下cookie的使用写法。之前还真没用过，sessionStorage和localStorage反而更熟悉些，他们的使用方法都是一样的。

存值：

sessionStorage.setItem("key", "value");localStorage.setItem("key", "value")

取值：

var value = sessionStorage.getItem("key");  var value = localStorage.getItem("key");

删除：​​​​​​​

sessionStorage.removeItem("key");  localStorage.removeItem("key");