存储javaScript本地缓存的方法我们主要讲述以下四种：

Posted 2021-05-14 前端技术前言大白话

javascript本地缓存的方法我们主要讲述以下四种：

• cookie

• sessionStorage

• localStorage

• indexedDB

cookie

Cookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP 无状态导致的问题

作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成

但是cookie在每次请求中都会被发送，如果不使用 HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用 cookie 保持登录态的网站上，如果 cookie 被窃取，他人很容易利用你的 cookie 来假扮成你登录网站

localStorage

html5新方法，IE8及以上浏览器都兼容

特点

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

• 存储的信息在同一域中是共享的

• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。

• 大小：5M（跟浏览器厂商有关系）

• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

• 受同源策略的限制

下面再看看关于localStorage的使用

设置

localStorage.setItem('username','cfangxu');

获取

localStorage.getItem('username')

获取键名

localStorage.key(0) //获取第一个键名

删除

localStorage.removeItem('username')

一次性清除所有存储

localStorage.clear()

sessionStorage

sessionStorage 和 localStorage 使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据

区别

关于cookie、sessionStorage、localStorage三者的区别主要如下：

• 存储大小： cookie数据大小不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

• 有效时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

• 数据与服务器之间的交互方式， cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

1.JS中为什么要尽量减少闭包的使用？

答案：闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能 2）还会容易导致内存的泄漏

闭包也有自己的优势：保存和保护，我们只能尽量减少，但是无可避免

2.HTTP 缓存有哪些？

强缓存：服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。

协商缓存：让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。出现 from disk、from memory 的 策略是强缓存。

1. JWT技术：( json-web-token)登录验证

a) 每次请求都需要携带token字段，可以进行路由等权限的验证，做前后端验证健全。如果没有携带token去后台，后台会认为没有权限，直接抛出错误

b) 发起一次登录请求，如果登录验证通过，后台返回数据会包括token字段，本地存储token字段，然后拿着token字段去后台请求对应的用户权限

c) 客户端收到服务器返回的JWT字段，可以存储在cookie里面，也可以存储在localStorage里面，但是cookie无法跨域，所以，最好的做法是放到http的头信息Authorization字段里面。另一种做法：跨域时，JWT放到post请求的数据体里面