--- theme: awesome-green --- > ⚠️本文为掘金社区首发签约文章，未获授权禁止转载 ## 背景在我们网页刷新的时候，页面上所有数据都会被清空。而在一些网站的搜索上，即使是你关闭了浏览器，下次打开时还是会有数据在页面上，如下图一个简单的搜索记录功能，当用户进行搜索时，所有的记录会被保存起来，不论是刷新还是重启浏览器，搜索的历史记录依旧显示在页面上。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42a3704f4522426096696990b19de2f6~tplv-k3u1fbpfcp-watermark.image) 这一系列的需求都可以通过浏览器的存储技术来实现。本篇文章，我们就来学习下浏览器存储技术中的`WebStorage` ，全面了解它的基础使用和进阶，以及如何利用这些方法实践两个常见场景。介绍使用方法的同时，我也会以封装一个`工具类`的方式来统一所有调用方法，学会这一点，可以让你在业务开发调用的时候更加方便。 ## 为什么选择WebStorage？我们知道，常见的轻量浏览器存储技术包括`Cookie`和`WebStorage`。那么，我们为什么选择`WebStorage`而不是`Cookie`呢？首先，`WebStorage`在使用上相比Cookie更友好，不再需要刻意封装成一些工具库来对一些常见的操作进行简化的调用，尽管市面上已经有很多成熟的方案帮我们做了这件事情。其次，`chrome(80+)`浏览器默认屏蔽所有`三方Cookie`已经不是什么值得震惊的事情了，随着这一次改动，`Cookie`无疑又被斩断了一只有力的手臂。不了解的小伙伴，强烈安利一手这篇文章，里面非常详细的对其进行了一些分析。[当浏览器全面禁用三方 Cookie](https://juejin.cn/post/6844904128557105166#heading-5)。除此之外，使用`Cookie`还需要面临以下问题： - 存放数据太小，`Cookie`的存储大小只有`4k`，如果你需要存储的数据非常多，那么很显然并不能够满足你的需求，且一般没有人这么做。 - 每次都会携带在`HTTP请求头`中，会与服务端进行一些交互，当我单纯存储一些本地数据时，很明显会造成性能浪费。而`WebStorage`在浏览器中的主要功能，就是在客户端进行临时和永久的数据存储，不直接参与服务端的通信和交互，因此可以很好地避免一些劫持的安全风险。同时，也具备了良好的存储容量，能胜任绝大部份的应用场景，且每个存储都是挂载在对应的空间当中，彼此独立去管理对应的数据，不会造成串数据和错数据的一些困扰。基于此，如果有需要存储到本地的一些数据，还是尽可能使用`WebStorage`来做为存储的首要选择。 ## 基础使用在本章节，我会从一个封装工具类的角度带大家学习一些webStorage的基础使用技巧。这里也先分享一个在线的源码地址链接：[Storage操作封装实践代码](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzjAFlCB3AoldUCyApgM7ECGA5oQDRwpnEDKMUwAdhcAGYCecAvnC7oQcAOQA6APQBXGMAA2YgFDL2MQlC5kAxoTjNolQgCEIEGMyhkwAYQhsuwComVw4ICABNCALnHEJMTADmJwAD7iChA6ZErUbsighBBy-mwyIABGmsr8quqa2noGMEZUjGQAboQAYtAgZPAIiYlSAFTtcIDj8YD45oBvpoAvqXDtUonyICQwZODpmTlQqu4dXQACbDP6gA6mgHbGgHnagMryI2PuXk1k-mRsPHmqOgoMxHC2MsRlIIbWVK7uYKxVTX0UEIZC8n2M-nBVESf2AAI0cB0DicFEhZS+pnMlhYNnsjmcMP+gLgrwhcAy2VyvyJCIAjjILBdyfNcokkWw3lAZDp0XAABQASh+7jg3H5GHYXkwcAAZDK4BK2FKMBJorEFFD9HKFZLMBJAqQQmxNUKWiKRahgMQJMDQZq4ABeHVKvVquKaxLuQSEBSBYXm1DobC4aBEUjGPliQDK+oBZJUA9c6AYI1AHrpgHlbQATkYALNUAMP+AA9NAKs2gAjbQCcsYALRUAAjqK5V7QDR8oAgBjEAs9AkS+TanU9XUA7cGANeVAAJGgEhzADWhBuIrWwJgMigHLggD21N7lQhRwC0cgPhzxAGNpgAgVDsnOBUGAAaRHxEF-gAgrgyDwADyc9gUAB8-rgE6nbDgAHksgArQg8iR11PS1rVtMF0WMRsvSWOAVg7OAewHAEFBkQh4NWN9pyeAddm3XdEgPAA1OJUNPU0m0wj9vz-ADkNIvkQJtEFwMXKDmzbdp4MAXCVAGnNQA0ZU1QAQt12dCwDIaxRHZFFSkXMwLCsXFkQJMc9yyLEFLAfkpOcNFZPUnE7CUigBX8KoIGALwX2ICUYB0FAtKMiRPB8cjzXcWI-TEA1glCXwmwDFArSYu0IO+J1Kz1byjQ9NyRSyW1BwAbhg80PP0MQ3SUPzYvcRiwPtcLdRVTKYpy+KQSSpt-LgHxtBkBQYGynLA0wHA8DDcgqEjWNAFlEwA7f0E5zCEAKnNAFjFfrAC5lQBQxSzQB75UAU7lAAGLQBT80AAnlAFNFfr6zY2LyrISrzXyAKgu0lwnVOlsYLgsc4EAFfjZ1jQANbUACoVAGS9QByTUAeB10Mop4KQWfD3GCAAvQgz2ZSkoBfSjkEC0DmM1VVCA4VBLvcRJ6GIABJDQQD5dd-HvDgTLgNSIAUEEPzNEUYbyhHQsICRMc-DA2AABXQMBNBgHh8ZHNjW2WdsbtE8SZjgdc4EAPui+qe5711FiS4Do-QZbllXAbgQIYBxwg8YJrWWAfWgVdckUxT5TGrAfbhedNs3UocN4teqQgABFzl0jFKhqeooEaeAnWp2KJimGYwHSQgMDgD2NEFCQDwAFWSQUEhymrPeVki0Nio63PZYhycZ6IKD5cgaljshaC813K4baq6ZCxd9UIHXcb5nhaAAKUYT8ADl9SNjhbbL2vzgFHaBDgH0-WDi00FakMCCCCMxEAAHTAEDIl7BLOaZAFg5QB6U0AQGMe-7wfWGH3hAE7TPMs0Ad+iVtjXZ68Oy6OPgnsRJu1YxKVyWeyfjsBW39fpwBel-dwowCKt11iAG8idHRwCuDwR8HdCZD2Mv4BBkQMgKAUC+Au8B2QaDYI1GS3tXZ+wDhEZkeDEGnwHr-QIDE4bBRYhiBOMD27rgnk2C2xDkYwAAPwSFDm8cOsp5RsCjjHQE8ck4pyFAAWkRA4EhMBRHJHEeAOAj4nSMVOpoyYqQYAO3nkFYEngaiwI7pPdwMNcEKCbHnexrd3yqNIYIkRu8yARBwfVJx0F343UAN+egATNMAABygBDcwgSMOAP8xaiEluE4BkC9yWIgNY7hI50EX2Mi+C2jFMY2J4WY3KrD8oMyYlYwgJT+bOLfu5egHBam4xvIwRByDUEGyJhQWgDhbDNKoP4Pk5MvDERQn4AwQoHTPg6f4vBtAsgMEIBM1CQjLjXDMYQjO0xEGMQPLA9p3T6nHWtNrOpnc4ADKGWDHxfjSYrLWYQXhQT3IU3EuePBgoXyN3YcYCQ9wQRQEFG-VsyhrpdBrHxWMmpADQcoJe4jw3BQMIAAD0gLAGqhA6oNWeK8d4mogA) 然后，在浏览器调试工具的`Application`菜单当中，左侧可以看到`Storage`的调试版，其中就有我们通过`API`保存到存储当中的值，可以在这里进行调试。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76e394b991624d31b9f79a73a89f349b~tplv-k3u1fbpfcp-watermark.image) ### 环境支持 & 初始化在开始前第一步肯定是需要做一些环境检查，不然在部分不支持这些特性的浏览器下是无法使用的，[这个可以在caniuse](http://caniuse.com/)上查看一些浏览器支持程度。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dcd3eea3212e43d394cb332760f601c3~tplv-k3u1fbpfcp-watermark.image) 而在我们的代码中，也要加上一层容错判断，如果需要对其做兼容的话可以进行一个处理降解。如`Cookie`或者是`IE6中`的`userData持久化用户数据`。下面是一个比较简单的判断，也可以封装成为一个简单的函数来进行调用。如果浏览器不支持则抛出一些错误到控制台当中。 ```ts class CustomStorage { private readStorage: Storage constructor () { if (!window) { throw new Error('当前环境非浏览器，无法消费全局window实例。') } if (!window.localStorage) { throw new Error('当前环境非无法使用localStorage') } if (!window.sessionStorage) { throw new Error('当前环境非无法使用sessionStorage') } } } ``` 当环境支持使用`WebStorage`的条件下，就可以初始化默认的一些数据了，在这里选择使用哪个`Storage`，同时将配置保存起来。 ```ts interface StorageBootStrapConfig { /** 当前环境 */ mode: 'session' | 'local', /** 超时时间 */ timeout: number } /** * 初始化Storage的数据 * @param config StorageBootStrapConfig */ bootStrap (config: StorageBootStrapConfig): void { switch (config.mode) { case 'session': this.readStorage = window.sessionStorage break; case 'local': this.readStorage = window.localStorage break; default: throwErrorMessage('当前配置的mode未再配置区内，可以检查传入配置。') break; } this.config = config } ``` 那么，通过`bootstrap`来初始化当前的一些配置后，在页面里就可以通过当前实例`customStorage`去使用一些函数方法。 ```ts import CustomStorage from 'web-storage-db' const customStorage = new CustomStorage() customStorage.bootStrap({ mode: 'local', timeout: 3000, }) export default customStorage ``` ### JSON序列化对于`WebStorage`来说，值的存储是非常依赖`JSON的序列化`。如下图: ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e68369653b8b449983987f87171930d8~tplv-k3u1fbpfcp-watermark.image) 当存入`Object类型`时，存入的数据会变成其类型的字符串，因为`WebStorage`的存储只能以`字符串`的形式存在，所以我们想要存储引用类型的数据，就需要依赖`JSON序列化`的能力了。通过`stringify`和`parse`等一些方法对值做出处理，就能很好的存储一些引用类型。但是也有一些`JSON.stringify`不友好的类型数据，尽量不要去存储，如`undefined`, `Function`, `Symbol`等等，我在这里也写了一个简单的函数用于检查存储值。 ```ts /** * 判断当前值是否能够呗JSON.stringify识别 * @param data 需要判断的值 * @returns 前参数是否可以string化 */ export function hasStringify (data: any): boolean { if (data === undefined) { return false } if (data instanceof Function) { return false } if (isSymbol(data)) { return false } return true } ``` 其中`isSymbol`方法做了一个`Symbol`类型值的判断。 ```ts /** * 判断当前类型是否是Symbol * @param val 需要判断的值 * @returns 当前参数是否是symbol */ export function isSymbol(val: any): boolean { return typeof val === 'symbol' } ``` ### 存入数据如果需要将数据存储到`WebStorage`当中，其本身提供一个`setItem`的API 来做这件事情，在这里以`localStorage`为例子，可以通过以下形式来存入一个值： ```ts // # 原生 window.localStorage.setItem('key', 'value') // # attribute形式存储 window.localStorage['key1'] = 'value' window.localStorage.name = 'wangly19' ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e76f04ac41c417e9cf85963d9e44711~tplv-k3u1fbpfcp-watermark.image) 而我们在使用中，显然不会去使用`原生API`的方式处理，绝大部分都会封装成一个`工具方法`，来处理一些重复性的工作。就比如在下面的封装中，我就对存储数据的内容做了一层包装，加入了`JSON序列化数据`和`过期时间`。 ```ts /** * 设置当前 * @param key 设置当前存储key * @param value 设置当前存储value */ setItem(key: string, value) { if (hasStringify(value)) { const saveData: StorageSaveFormat = { timestamp: new Date().getTime(), data: value } console.log(saveData, 'saveData') this.readStorage.setItem(key, JSON.stringify(saveData)) } else { throwErrorMessage('需要存储的data不支持JSON.stringify方法，请检查当前数据') } } // 使用 customStorage.setItem('setItem', [1]) ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/649f9dc4088744008db0026d27c382e2~tplv-k3u1fbpfcp-watermark.image) ### 读取数据既然有存入，那么必然会有读取，我们可以通过`getItem`或者是`Object`的形式进行值的读取。下面，我们就来看看三种方式的实例吧。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1834bb5cbc2460da17b87831502d45b~tplv-k3u1fbpfcp-watermark.image) ```js window.localStorage.setItem('person', JSON.stringify({ name: 'wangly19', age: 22 })) const person = window.localStorage.getItem('person') JSON.parse(person) // { name: "wangly19", age: 22 } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90141ce4b01243bbb6beb2f7abff718a~tplv-k3u1fbpfcp-watermark.image) 上面是`普通的使用方式`，而我们`封装`时，也会对存入的数据进行一些`判断`，将存入的JSON数据做一个`解析化的处理`，直接返回`解析后的数据`，更加的方便和易于使用。 ```ts /** * 获取数据 * @param key 获取当前数据key * @returns 存储数据 */ getItem(key: string): T | null { const content: StorageSaveFormat | null = JSON.parse(this.readStorage.getItem(key)) return content?.data || null } // # 使用 customStorage.getItem('setItem') // [1] ``` ### 移除对于存储的移除不仅可以使用`removeItem`，`delete`等操作来对存储中的值进行`移除`。 ```js // # removeItem window.localStorage.removeItem('person') // # delete delete window.localStorage.person delete window.localStorage['peson'] ``` 还可以使用clear来清除存储中所有的数据。 ```js window.localStorage.clear() ``` 此外，如果移除某条数据时`Storage`没有存储当前`key`的数据，那么我们就不需要去执行当前`移除数据`的操作。我们来看下面封装的`removeItem`方法，我加入了一层`值是否存在`的判断来决定是不是真的需要执行移除这步操作。 ```ts /** * 移除一条数据 * @param key 移除key */ removeItem(key: string) { if (this.hasItem(key)) { this.readStorage.removeItem(key) } } /** * 清除存储中所有数据 */ clearAll() { this.readStorage.clear() } ``` ### 长度length `WebStorage`自带`length`属性，可以获取当前`Storage`的长度。 ```js window.localStorage.length /** * 返回当前存储库大小 * @returns number */ size(): number { return this.readStorage.length } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aecc758c5ec6415c8653c6669deb259a~tplv-k3u1fbpfcp-watermark.image) ### keys 和 values 看到这里，很多朋友应该知道会怎么实现了吧？没错，通过`Object.keys`和`Object.values`可以拿到当前`Storage`中所有的`key`和`value`。部分`埋点SDK`会有上报`Storage`来做数据筛选。 ```js Object.keys(localStorage) // (4) ["wwwPassLogout", "BIDUPSID", "BDSUGSTORED", "safeIconHis"] Object.values(localStorage) // (4) ["0", "30B3EE0AF6EE9F4F89EF16486C288502", "[{\"q\":\"localstorage%20%E8%BF%87%E6%9C%9F%E6%97%B6%…:\"new%20dateshijianchuo\",\"s\":4,\"t\":206989341223}]", ""] ``` 其次就是通过`key(index)`方法，可以直接获取某个位置的值。 ```js window.localStorage.key(0) window.localStorage.key(1) window.localStorage.key(2) ``` 在`工具类`当中，我也对其进行了`封装`，可以使用`getKeys`, `getValues`来获取存储空间的所有`Key`和`Value`的集合。 ```ts /** * 获取所有key * @returns 回storage当中所有key集合 */ getKeys(): Array < string > { return Object.keys(this.readStorage) } /** * 获取所有value * @returns 所有数据集合 */ getValues() { return Object.values(this.readStorage) } // # 使用 customStorage.getKeys() customStorage.getValues() ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19dd2494d9984daf9b58bbfde0b28022~tplv-k3u1fbpfcp-watermark.image) ### 是否存在某个属性？判断当前`Storage`中是否存在某个属性，很多同学都是通过`getItem`去获取一个值，然后判断value是否存在进行一个判断。但是很显然，我们能够像操作Object的`hasOwnProperty`方法来判断当前是否有这个属性，由于返回的是boolean类型，相对来说更易于理解。 ```js localStorage.key(2) // "BDSUGSTORED" localStorage.hasOwnProperty('BDSUGSTORED') // true localStorage.hasOwnProperty('1111') // false ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9a0ebb84f94444bacd2a48f15a216c8~tplv-k3u1fbpfcp-watermark.image) 基于此，我也封装了判断存储中是否存在该值的`hasItem`方法，用于做一些`key`是否在存储中存在的一些判断。 ```js /** * 判断是否存在该属性 * @param key 需要判断的key */ hasItem(key: string): boolean { return this.readStorage.hasOwnProperty(key) } ``` ## 进阶使用在进阶使用当中，我会介绍一些工作中可能会`碰到的问题`，并且给出一些`解决方案`。 ### 过期时间 `WebStorage`中`SessionStorage`的一个周期是当前会话。而`localStorage`则如果不手动清除，则不会主动清除存储的数据。 > 关键词，面试会问：localStorage如果不是主动清除，存储数据是不会过期的。所以，很多时候如果需要过期时间则需要开发者自己去处理，而处理的方式也非常简单暴力。那就是给予存储值时带一个时间。参考下面代码，通过`new Date().getTime()`来取到当前时间，然后设置到存储当中去。 ```js const person = { // 存储数据 data: { name: 'wangly19', age: 22 }, // 过期时间 timestamp: new Date().getTime() } window.localStorage.setItem('person', JSON.stringify(person)) ``` 获取时间的时候，会进行一个简单的判断，`当前时间 - 存储时间 >= 过期时间`，这样就能够在值操作的时候做一些判断处理。 ```js // # 原生 let person = localStorage.getItem('person') person = JSON.parse(val) // 这里可以使用一些库在做处理，如`dayjs` if(new Date().getTime() - person.timestamp > [过期时间]) { // 数据已经过期的一些操作 } else { // 正常处理 } ``` 因此，需要在原有的`getItem`的方法上，添加一条过期时间的判断，我也直接封装在函数内处理这一份逻辑。 ```ts /** * 获取数据 * @param key 获取当前数据key * @returns 存储数据 */ getItem(key: string): T | null { const content: StorageSaveFormat | null = JSON.parse(this.readStorage.getItem(key)) if (content?.timestamp && new Date().getTime() - content.timestamp >= this.config.timeout) { this.removeItem(key) return null } return content?.data || null } ``` ### 监听函数 `WebStorage`修改时，会触发浏览器`storage`事件。而在应用中可以使用`addEventListener`添加一个`storage`事件对其进行绑定。而这个触发机制可以看下图。在不同窗口对`storage`触发的时候会输出当前的`event`信息。在`event`当中，我们可以拿到触发的`url`,`新值`, `旧值`, `触发的key`等信息，我们可以通过这个API去做一些浏览器URL监听的事情。 ```js ``` ### 修改数据由于原生没有`changeItem`这类的方法，因此我们需要自己去做一些方法的`封装`来方便我们频繁的需要去修改存储当中数据。如下面的一个类似于`useState`回调的形式来做一些值的修改。 ```js changeItem('name', (oldValue) => { const name = `update: ${oldValue} update` return name }) ``` 实现方式也相对比较易懂，通过`getItem`先获取数据，然后在通过`setItem`设置`onChange`回调函数的值，将一个连贯的操作串联起来。 ```ts /** * 修改当前存储内容数据 * @param key 当前存储key * @param onChange 修改函数 * @param baseValue 基础数据 */ changeItem( key: string, onChange: (oldValue: S) => S | null, baseValue?: any ) { const data = this.getItem(key) this.setItem(key, onChange(data || baseValue)) } // # 使用 customStorage.changeItem('key', (oldValue) => { retutn oldValue + 'newUpadte' }) ``` ### 空间 & 溢出如果是重度使用用户，如一些文档构建项目，往往很多都是会往`localStorage`中存很多数据，很多开发者都会担心会不会直接`溢出`。所以在这里，也设想了一些解决方案来处理这些问题。 #### 存储状态 & StorageEstimate 在安全的上下文和支持的浏览器下，通过`StorageEstimate`可以获取到当前浏览器的一个缓存情况，如：使用多少，总共多少。如下代码，首先判断了浏览器是否存在`navigator`，然后继续判断了`navigator`是否有`storage`，最后再去执行`estimate`异步获取我们的存储信息。 ```js if (navigator && navigator.storage) { navigator.storage.estimate().then(estimate => { console.log(estimate) }); } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/490c660cd5e7442a91760712e4cc6edd~tplv-k3u1fbpfcp-watermark.image) > 该Web API需要当前项目在https下。获取到的quota（存储总量）相对来说在3M左右，在开发场景下，这绝对是一个安全的内存范围。 #### 缓存溢出清理如果是在`内存濒临溢出`的场景下，那么我们就需要释放一些空间来做处理后面的数据修改了。首先我们对带有时间的数据进行汇总排序，如下方法就是将`storage`中所有带有`timestamp`字段的数据汇总后进行排序。 ```ts /** * 获取当前清除存储空间，并且进行排序 */ getClearStorage() { const keys: string[] = Object.keys(this.readStorage) const db: Array<{ key: string, data: StorageSaveFormat }> = [] keys.forEach(name => { const item = this.getItem(name) if (item.timestamp) { db.push({ key: name, data: item }) } }) return db.sort((a, b) => { return a.data.timestamp - b.data.timestamp }) } ``` 当拥有了一个排序好的数据列表时，就需要考虑数据清空了，按照时间线将距离当前越久的时间清除。而这个时候，需要理解一个条件: `总大小(quota) - (使用大小)usage > [当前存入大小currentSize]` 当我们有一个排序好的存储时，只需要循环判断当前空间是否满足需求即可，如果满足跳出循环。反之继续异步，直到我们的空间够为止。 > initCacheSize单纯对容量数据最一个刷新。获取新的容量数据。 ```ts /** * 容量清理，直到满足存储大小为止 */ detectionStorageContext(currentSize: number) { if (this.usage + currentSize >= this.quota) { const storage = this.getClearStorage() for (let { key, data } of storage) { // 如果满足要求就跳出，还不够就继续清除。 if (this.usage + currentSize < this.quota) break // 刷新容量大小 this.removeItem(key) initCacheSize() } } } ``` 最后一步就是在`setItem`中执行`detectionStorageContext`, 每次更新存储内容都会先判断下`是否要溢出`，如果添加或者修改的数据会溢出，那么我就会做一个`空间清理`了。 ## 实践场景本章节，主要讲述了一些简单的`WebStorage`的使用场景。 ### 搜索历史到这里，我们的一个`工具类`就已经基本成型了。最后，再回到`一开始的案例`中，我们就可以通过工具类中的`changItem`迅速的实现这个搜索历史的功能，而不必关心一些数据兼容上的问题。我们需要关注的只是存储值的设置。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32a66f42210047c8ac5c0db6e5565f30~tplv-k3u1fbpfcp-watermark.image) 事例代码如下： ```js export default function Search() { const [searchList, setSearchList] = useState([]); useEffect(() => { const data = localStore.getItem('search') setSearchList(data || []) }, []) const onSearch = (value) => { if (value) { localStore.changeItem( 'search', (oldValue) => { if (oldValue.includes(value)) { return oldValue; } if (oldValue) { const newValue = [...oldValue, value]; setSearchList(newValue); console.log(newValue, 'value'); return newValue; } if (value) { setSearchList([value]); return [value]; } return []; }, [], ); } }; return (

{searchList.map((e) => { return ( {e} ); })}

); } ``` ### 图片数据浏览器对于请求是有限制的，而我们项目中绝大部份图片其实是通过后端接口进行返回的，在这里以`emoji`表情包做个例子。我们拿知乎的表情包数据来进行一个模拟，发现一共有73条数据，如果每次刷新网页都请求一次后端数据是一件非常难受的事情，而这些数据显然也不需要存放在`Store`当中，在一定的时间中，发生改变的几率很小，那么我们将它放在`本地存储`显然是一个不错的选择。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e6e7e9391db4720bf5c2d3d078582d6~tplv-k3u1fbpfcp-watermark.image) 在页面加载时，我会对接口数据请求加一层判断，只有`数据为空`时才会请求后端图标数据列表。如果是过期时间的话，获取数据时会清空本地图标数据，然后重新请求后端图标数据，在重新放入缓存中并且更新新的过期时间。 ```js const emojiRef = useRef(localStore.getItem('emoji')); useEffect(() => { if (!emojiRef.current) { fetchEmojiIcon() } }) ``` 如果你项目中存在大量的资源路径，可以将其放在`localStorage`中进行存储，方便需要用到时进行使用。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ae77f8169114c769afa1779ffe274b4~tplv-k3u1fbpfcp-watermark.image) ## 资源 & 资料 - [当浏览器全面禁用三方 Cookie](https://juejin.cn/post/6844904128557105166#heading-5) - [localStorage、sessionStorage、cookie、session几种web数据存储方式对比总结](https://juejin.cn/post/6844903989096497159) - [前端存储除了 localStorage 还有啥](https://juejin.cn/post/6844904192549584903) - [Web Storage (Second Edition)](https://www.w3.org/TR/webstorage/#implementation-risks) - [项目实战|缓存处理](https://juejin.cn/post/6854573211594522631#heading-4) ## 总结本文对`WebStorage`中绝大部分使用技巧都做了一些使用的总结，将常用的一些操作存储方法都进行了封装，同时也对工作中经常碰到的一些复杂场景，如过期时间、数据更改、缓存溢出等功能进行了一些叙述，最后将其封装到了工具类当中，方便在日常开发中进行调用。最后在对`WebStorage`有了一些了解之后，那么我们在后续工作中，是不是可以思考有些数据可以考虑放到存储当中去？在节省资源的同时，也能有更好的性能，同时也缓解了部分服务端的压力。 ## 近期好文 - [我 & 掘金，毕业一年后，我被掘金签约了｜2021 年中总结](https://juejin.cn/post/6976782987480432670) - [总结TypeScript在项目开发中的应用实践体会](https://juejin.cn/post/6970841540776329224) ## 尾注 > 如果本文对你有帮助，希望能够给我点一赞支持一下。
本文首发于：掘金技术社区
类型：签约文章
作者：wangly19
收藏于专栏：javaScript基础进阶
公众号: ItCodes 程序人生