前端浏览器持久化存储有哪些方法

今天我们来聊一聊浏览器缓存相关的内容。浏览器缓存也是前端面试里面必须要会，而且出现概率非常高的内容。相比于前面几期视频中的库可以或者是跨域，浏览器缓存并没有那么难啊。 和浏览器缓存相关的自断一共也才这么几个，在了解这些自断之前，那我们要清除两个概念，强缓存和协商缓存。浏览器会先检查强缓存，然后再检查协商缓存。 如果本地缓存的资源经过强缓存检查之后是有效的，但浏览器就会直接返回缓存的内容，浏览器甚至都不会把这个对资源的请求发送出去。 如果直接请求一个本地已经缓存过的资源或者 cashcom 初中包含 no cash， 那么浏览器向这个资源地址发起请求的时候，如果这个资源没有发生任何变动，那服务端通常会返回三零四状态吗？并且返回体重不需要携带任何信息。浏览器在接受了这个服务端响应之后，会使用本地缓存中的资源，这就 是协商缓存。听起来可能有点抽象啊，咱们来具体分析分析这些头儿信息。 x 八要死这是一个已经有一点过时的属性，他的替代属性是 cash 抗处。不过还是要说一说这个属性啊， x 八要死表示的是一个绝对的过期时间，这个资源在本地被缓存之后，如果再次请求这个资源的时候， 浏览器就会比对当前的系统时间是否超过了 expect 对应的时间。如果系统时间没有超过的话，那就是有效的，浏览器就会直接返回换成的资源，同时呢，也不需要对这个资源发起请求了，他的状态吗，会是两百 expect 的缺点呢，就是会参照系统时间，而电脑的系统时间我们是可以人为设置的，所以说这个属性并不是很有效。 cashcom 处这个 httb 头是浏览器缓存里面最核心的部分，它的可配置所信那也是多了离谱啊。对于浏览器而言，帕布里克 private 是一样的，没有区别。帕布里克表示资源能被浏览器和中间代理缓存，而 private 表示只有浏览器 能够缓存啊，中间代理不能缓存。比如说服务器下发了一个开始康设为 privates mxc 就能三千六的一个资源刷新页面之后流传器，尤其是这个资源来自内存缓存。 private 和帕布里克主要作用于中间代理服务器啊，也就是 cdn 这些。 nocas 也会配合协商缓存一起使用。呃，这里要注意啊， nocas 并不是不缓存， 而是需要请求服务器，然后根据服务器返回的内容来决定使不使用缓存。在这个例子中，服务端返回了 cash com 处就是 no cash。 通常呢，服务端还会返回 etygo 和拉斯 modify 的两个头儿信息，而当我们刷新页面重新请求这个资源的时候，浏览器就会把刚才传过来的 etygo 和拉斯 modify 了，转换成一幅拉 max 和一幅 modify 试一试。 末端在比对伊泰和拉斯莫里发的之后，再决定是返回三零四还是返回两百。返回三零四的话，浏览器就会直接使用本地的资源，如果返回两百就表示服务端的资源发生了变动，浏览器也会把这个新的资源换成在本地并且 应用这个新资源。好吧，兄弟们这里已经有点超纲了，这应该是后面讲的内容。总之呢， loca 是根据服装的响应来做相应的资源选择了。 no store 就比较直接了，就表示不使用缓存，他告诉浏览器你不应该缓存这个资源。浏览器再次访问这个 no store 资源的时候，即使响应头中有伊泰克和拉斯 modify 的 在请求了 hgtp 头中都不会携带任何缓存相关的自断，因为本来就不需要让浏览器缓存。 maxa 用来设定缓存的有效时长， 他的单位是秒，你只需要加上 cashcom to max h 等于时长，那么资源就能自动的被缓存在本地。当我们刷新页面的时候，浏览器就会提示这个资源是来自内存缓存，因为这个资源是来自内存缓存啊，而且实际上也不需要发请求去再次获取这个资源，所以说它消耗的时间非常的短。 sgr maxhage 也是指定缓存的有效时长，但他是用来告诉代理服务器的，对于浏览器来讲是没有效果的。对于 expires 和 cash 抗处同时 存在的情况，只要 cash ctrl 中设置了 max a 级或者是 s 港 max a g， expires 就会失效。再次刷新页面的时候，浏览器提示这个资源来自缓存，而实际上现在的时间已经超过了 expires 对应的时间，所以说有冲突的时候，浏览器会应用 cashcom 处里面的字。后面这四个指令常规使用的时候用的比较少，这里贴上 mdn 对这几个指令的解释。 应用缓存设计了浏览器缓存和代理福气缓存，所以看起来会有一点杂。伊泰克和伊夫郎 match， 伊泰克表示的是服务端对于一个自愿的唯一标识。要是有个面试官问你，这个伊泰克是怎么生成的呢？那你或许可以回答， 我觉得贵斯可能不太适合我，我实在想不出哪个恶心的前端面试官会问这种问题啊，兄弟们，咱说一句不好听的话，你看这 htdp 里面的这么多字段啊，这有哪个字段是需要前端来自己操作的呀，通通甩给后端。好吧，吐槽归吐 草啊，咱们继续来了解伊泰感。伊泰感是怎么生成的咱就不用管了，因为浏览器的任务就是把它接收到，然后就把它给发送给服务端。举个例子，我们自己写一个服务端，然后服务端返回这个资源的伊泰感是幺零零八六八八八八八。当我刷新页面的时候，浏览器再次请求这个资源，就会带上一副浪漫起 flymax 的值，就是最开始服务器返回了 etac 的值。所以说其实浏览器什么事都没做啊，那什么时候会用到这个 etag 呢？比如说 gap 上面的一个资源缓存服务器指定这个资源在浏览器上面只有三百秒的有效期，当资源在本地缓存超过了三百秒之后， 刚好缓存服务器又给了 etac 和 nasta modify 的，我们把页面刷新，因为缓存已经过期了，所以浏览器要向缓存服务器发起请求，这个时候就会把 etac 变成伊芙拉麦器，把 nasta modify 的值给伊夫 modify 的 six 请求到了缓存服务器之后呢，发现这个自愿的最新版本的 etag 和这个伊芙拉麦气是一样的，所以 就直接返回了三零四。浏览器直接使用本地缓存的资源就可以了，要是两者不匹配呢？那缓存服务器返回了内容就和浏览器不带任何缓存自断重新请求这个资源是一样的，而返回的状态码是两百，表示浏览器要缓存这个最新的资源。 至于 nasa modifier， 是用来标识自愿的最后更改时间的。 nasa modifier 的优先级比 etac 低，当 etac 和 nasa modifi 的对应的 evil match 和 if modified since 同时发给缓存服务器的时候，缓存服务器也会只认 aframech。 当然了，关于这种优先级什么的都是约定的一种规范，你自己甚至都可以设计一个缓存服务器， 然后让 nasa modify 的优先级比伊泰克更高。缓存服气通过比对一副 modify 的 scenes 活该自愿最新的变更时间来决定返回二零零还是三零四。前面已经把和缓存相关的字段都说完了，接下来我们来看这个例子吧。通常缓存在下发给浏览器的时候， cashcom 出 itta 和纳斯魔力 fire 的三个字软都会带上 cashcom， 初中的 maxh 和帕布里克基本都会设置，不过也不一定三折都得带上了。像这个请求就只返回了 etag， 而当我刷新页面之后， etag 会转变成一份浪漫，而且发送出去。服务端返回了是三点四， 直接使用本地缓存。当我把服务端这个文本给改了之后，再次刷新页面的时候，服务端返回了 tag， 和我们传递了一份浪漫爱情，它是不匹配的。 这里服务端就返回了两百状态吗？让浏览器重新缓存？浏览器访问一个资源呢？我们可以认为有两种形式，第一种是在地址栏里面直接输入资源的 url， 在这种情况下，即使再强缓存的有效期内，浏览器依然会把对这个资源的请求给发送出去，就好像 cashcom 处为 maxa 九零一样。 实际上在地址呢，输入自然 uil 的时候，强缓存就会失效，而协商缓存还是有效的。不过在一个复杂的网页上，我们通常都不会直接访问某个资源，如果这个资源是有网页内的代 加载出来的，那么他就会遵循强缓存和协商缓存的策略。同样还是这个资源刷新页面的时候，浏览器提示这个资源是来自内存缓存，也就是强缓存。另外关于刷新页面呢，也有几种不同的情况。关于刷新对缓存的影响，网上很多答案都是错的。 ctrl f 五和 ctrl shift r 二，他会直接忽略强缓存和协商缓存，即使之前请求的时候已经携带过 etech 和拉斯的 modify 的，在强行刷新页面发起请求的时候， etag 和纳斯 modifa 的都不会带上。 这种情况下，服务端通常都是返回两百了。而对于 f 五康寿啊或者是地址，然点击刷新按钮，强缓存和斜算缓存都是有效的。浏览器会先验证这个资源是否在强缓存的有效期内，如果并没有过期的话，就会使用本地资源，不用发出这个请求，如果本地资源已经过期，那就会向缓存服务器发起请求，缓存服务器验证 伊泰感和纳斯魔力法之后再决定返回三零四还是两百。好了兄弟们，本期视频到这里就结束了，视频里面使用到的例子有点多，大家可以反复观看哈，如果你们觉得有用的话，那就给个三连吧，拜拜。

好，这节课呢，来讲一下 pina 中的一个持久化存储。持久化存储， 首先呢，实现吃法存储呢，分为两种情况，第一种情况呢，就是我们直接自己写这个 local storage， 那这种我们就不说了，因为是直接写就可以了。 第二种形式呢，是利用插件形式，那这节课呢，我重点讲就是插件这种形式。好了，下面呢，来看一下我这个文档啊，那我这也写个文档，然后大家呢，可以参考我这个链接啊，参考链接我也给大家放到这，那具体怎么样去用呢？首先第一步，我们需要把这个插件呢进行一个下载，来到这呢，咱们就 利用这个 c a p m 呢，给它下载一下啊，下载完事以后呢，呃，我们还要去改一下之前的一些目录的结构啊，或者说文件吧，就是我们之前这个 pina 呢，是在 mate g s 直接引入的啊，然后呢， story 里边呢，并没有一个 index g s 啊。然后呢？其次我们插件内容呢？呃，放到这个全局上就不是特别好啊，就是它的维护性呢，就比较差了， 所以说呢，我在这儿还是改一下吧。啊，这儿呢，我就引 pro 的一个 store 啊，和之前目录结构差不多。然后这儿呢，有一个 rom， 找到这个点杠 store 下，我一会儿新建一个 index 点 g s， 只不过呢，这个 index g s 呢，我可以不用写，他会默认去找到。好，那现在呢，我要找到我的 store 目录下，新建一个 index 点 g s， 然后这个 inter gs 里边内容呢，就是我们要 create pina。 好，我们把这拿过来啊，这是 pina， 然后这个呢是引入呃， pina 的持久 画持久画存储插件啊，然后这呢是使用这个插件啊，就是 又死一下，对吧？好，那我们的这个 user 点 g s 以及售点 g s 内容是不需要进行任何调整的啊，就是说目前来说啊，当然这个插件呢，我们肯定要引入进去的。好了，现在呢，我们跑一下这个项目啊，刷新 啊，这样是没有问题的，对吧？那现在呢，我这有一个年龄，我一直点，比如点到三十岁了，然后我刷新一下，哎，又回到十八了，那明显是没有做到持法存储的好，下面我们看看该怎么去做啊？ 其实呢就是配置啊，比如说我要在 user 点 g s 中啊，给它进行这个配置。好，那我们就找到这个，最后啊给它加上这个开启数据缓存啊，就是那个插件 一旦开启完事以后，大家来看啊，刷新走啊，比如说我现在点到二十五吧，刷新一下，大家看是不是还是二十五呀？啊？就证明他其实已经尺码蹭出了，但是 大家要注意啊，他其实默认走的是 session 啊，走的是 session storage 啊，并不是我们的 local， 什么意思呢？就是我把这儿这个页面关了，然后我再进去还是一个十八，所以说我们要让他呢走 local storage， 你就要有更多的配置啊，比如这块 我们给他再来一个配对象，前面呢会指定一个 k， 然后这呢有一个 store， 呃，就这个，呃， storage， 对吧？这有个 storage， 然后这是 local storage， ok， 这样就可以了。好，那我们把这内容给他改一下，感觉刚才有一点别扭啊，这样会好一点 啊啊，然后呢，其实这样的就是他默认一开始的时候啊，比如说我这个东西我没有加吧，我没有加刷新啊，我们可以看一下他的绘画啊，在这有一个绘画。好，我们点也点点， 它会按照你的 id 也是你模块儿去定义前面这个 k 啊。好，那你这儿呢，可以指定一个 k， 比如说我们就叫它小路线下滑线， user， 好，来，稍息。 走走走，注意，这就不改了啊，找哪了？在这看到了吧？好，刷新一下。三十二啊，刷新还是三十二，对不对啊？关了我们再进去， 它还是三十二，那这样的话呢，就实现 logo 的这个持有化存储是吧？哎，这样就 ok 了。行，那其次呢，就是说，呃，这儿配置还有很多啊，比如我这儿也写了啊，就是你这个 模块中 state 数据比较多，比如 a 制，还有你的这个姓名啊，还有很多很多，比如 a 也好，是 b 也好，你其中这个 a b 呢，其实是不需要深化存储的，也是你数据里边不见得 所有都要持有它存储啊，你可以配哪些需要加进去，哪些不需要就可以不加进去，他默认是都加进去的哈，你可以单独去配哪些需要或者不需要。好吧，比如我们这样的说，哎，这个 age 需要这个 name， 需要啊，你就加进去就好了啊，当然，我这样呢就不给大家去加了啊，你知道这个意思就可以了。 好，这就是，呃，我们的这个 pina， 它的一个持续化存储啊，比较简单啊，就是和原来那 vivo x 差不多哎， pa 一配，然后直接呢就可以去用了，然后这个地方的数据呢，也都没有问题了。好， 那有关于 pina 的一个持卡存储，我就给大家先说到这里。

哈喽，大家好，今天跟大家分享一下浏览器本地存储方式，主要有三种，第一种是 gucci， 存储大小为四 k b， 最多二十个，主要存储登录信息。第二种是赛车思维者，属于绘画机，存储，咱们关闭页面或者关闭浏览器数据，数据就会清除。 三种是 logos 座位者，属于永久存储，除非咱们手动清除缓存才会把书记清掉。 loos 座位者和三人所有者在同一御下最多存储五兆。各个浏览器之间会略有差异。 如果是左右的和 cs 左的，有三个共同的 a， 共同的 api， 第一个是赛的艾特姆设置一个值，第二个是 get item 取一个值。第三个是克里尔，是倾注所有存储的数据。还有一种不常用的存储方式是 inst b。 好的，谢谢大家。

好，我们来说一下这道题，浏览器的存储方式有哪些？那么我们先来说一下它都有哪些存储方式？比如说第一种 cookies， 对吧？ cookies 有 k 加 b s， 那第二种呢？是什么呢？ local storage 对吧？等于二 storage， s， t o l a， g， e， 第三种呢？还有什么？ se session storage 对吧？ s e f s i o n s t o a g e ok， 还有第四种呢？可能大家，呃，不怎么听说过叫做 index d 的 i n d x e d d b， 他有这样几种存储方式啊？我们先来说 cookie， 那 cookie 呢？它是 h 五标准的，呃，就是 h 五标准前的一些本地存储的方式。好吧， h 五 好，那么他有哪些优点呢？比如说金融性好，还有什么呢？就是欠削，然后自带 cooking， okay， 那么他有什么缺点呢？就是，呃，存储量，看一下 存水量小，还有什么呢？嗯，我们这个自动，他在前镜头里面加入这个 cookie 呢，就可能我这个项目我都用，用不到，那你给我添加，那可能就会造成一些资源浪费，对吧？资源浪费， 还有就是，呃，使用麻烦，如果要使用，我们还要进行分装，分装， ok， 这就是 cookie。 那么 local storage 呢？ local storage 呢？它是 h 五加入的一种标准的方式。好吧，本地存储的一种方式，以建制队的形式来进行存储，它是 h 五 加入以线直棍为标准。 好，那么他有什么优点呢？就是操作方面，操作方面，然后呢？永久存储，永久存储，永久存储，然后兼容性比较好，兼容性较好。 另外呢，就是 local story 也它可以把就是第一次清理的数据呢，直接就存到本地。缺点呢？缺点是什么呢？就是，嗯， 可能有一些浏览器呢，他会把这个 local story 的 local storage， 咱们保存的这个值呢，就限定他的这个利息保存值，保存值的类型被限定， 还有就是浏览器在一些隐私模式下不可读取。 好，还有就是，嗯， logo storage 呢，它是不能够爬被爬爽的。嗯，对， 好，这是我们需要知道的一些关于 local storage 的内容。那么 session storage 呢？它和 local storage 差不多，它们两个的区别呢？就是 session storage， 它 是当前页面，嗯，关闭后，关闭后就会立刻清清理。 还有就是他不能够在所有的那个同源窗口中进行共享，他只是绘画，绘画级别的存储方式。好吧，绘画级别的一个存储方式。 嗯，那最后剩下的就是引带 x d b 了，它也是 h 五标准的一个 存储方式，他呢是一个数据库，可以进行键时段进行存储，也可以进行快速的读取。嗯，非常适合一些那个外的场景啊。同时如果说我们用 gs 去操作的话，会很方便， 也就是 h 五标志的存储方式方式。嗯，他是 一键值得进行存储，可以快速读取，这个适合 why 的场景。 ok， 这就是我们需要了解的关于浏览器的一些存储方式，大家记住就可以了。

好了，我们来看这样的面试题啊，那么浏览器呢是如何对 htm 五的离线存储资源呢进行管理和加载的啊？首先呢，这边呢会分为两种情况，一种是在线的情况啊，另一种呢是离线情况。 那么首先在线情况的话，浏览器呢会啊，会发现 htmi 文件 头部 啊有 max 赛特这样的一个属性啊，那么他呢会请求 啊，迈着赛特文件， 那么如果第一次发文页面， 那么浏览器啊会根据 max 赛特文件的内容下载相应的资源啊， 并且进行 离线存储啊。如果已经发弯的页面， 并且资源啊已经进行过滤线测出， 那么浏览器会啊使用离线 存储的资源啊，加载界面 好，然后 浏览器会 对比 新的啊， max set 文件啊， 如果文件没有发生变化， 就不会做任何操作， 那么如果发生了更新， 就会啊重新下载文件 装的资源， 并进行离间算错 好，这是在线的情况啊。然后呢我们再看离线情况，那么离线情况的话呢，这边浏览器呢会直接去使用离线资源啊。

哈喽哈喽，同学们，大家好，在我们日常开发当中呢，经常会对配置进行管理，那么大家是如何去做的呢？我这边是使用的线上配置，然后线我使用的是 narcos 的一个线上配置中心。 呃，那么那么大家是如果使用 narcos 的话，大家是如何去呃，把我们 narcos 线上的一个配置，然后持久化到我们自定义的一个买塞口当中的呢？ 呃，今天我就给大家分享一下。呃，既然我们要使用 narcos， 那我们肯定要去人家的官方呃， narcos 的一个官网，对吧？然后去 github 把我们把对应的一个呃， narcs server， 当然我这边是一个 windows 环境， 我这边下载是已下载的是一个 windows 环境的一个压缩包，然后我们下载下来进行解压之后， 然后会进入到这个目录，进入到这里面有一个 config， 既然我们要把线上的配置，然后保存到我们自定义的数据框当中，那我们肯定要修改一些配置，那我们点击点开这个 application properties， 然后里面我们会针对这个数据库，我们改成我们自己的一个数据库，当然我这个 c， 比如说我这边建一个 ct 数据库，当然我这个 ct 数据库还没有建出来，这边是我的数据库，呃，数据库的一个用户名，一个用户一个密码，对吧？然后我们 我们保存，然后点它，我们点完之后，点完之后呢，我们去到数据库里面去 create create great database， 对吧？ database 的一个 city， 我们刚才写的是一个创建 ct 的水库门运行，然后我们在这边点击一个刷新，刷新之后我们可以再找到这个目录，这个目录我们发现下载下来之后有一个 narcos， 买 circle 的点 circle 文件， circle 脚本，那我们在这边就去 运行塞口文件，对吧？我们找到它，然后 nicos， 然后开始，然后运行完之后我们刷新一些表，这是 nicos 官方提供给我们的一些表。呃，然后我们在这边现在是线上什么配配置都没有，那我们现在， 呃去现我们我们再次来到这个 narcos 的一个 narcos 这边的一个目录，我们点击面变变目录下面有一个启动文件，我们点击 这就在启动我们的一个 narc 时， 啊，好，这边已经启动完毕。启动完毕之后我们打开浏览器，我们在这边输入我们的一个 幺二七，然后他这边会有一个纳克斯的一个配置，对吧？现在是一个全新的一个配置，呃，那我们现在比如说我们，呃可以建一个命名空间，对吧？新建命名空间，比如说我们建一个 tv， 第一位开发环境，对吧？空间命名也是第一位描述的话就是一个开发环境配置，对吧？然后我们建完之后，我们在这边他会多出来一个第 以为我们在这个 dv 里面，然后去添加一些，添加一个，比如说我们的 apple vacation， 然后杠 dv 点点压秒，对吧？然后在这边的话，这边我们比如说把我们的配置，然后 粘到这边，然后选他的一个格式进行发布，然后我们发现在发布成功，对吧？我们看一下，查看我一下我们的数据库，我们刷新 它会在这边多出来一些配置。我们刚才建的这个 uplike 是在这个 content 里面就是我们的配置，然后我们持，一旦我们持久化之后，即使我们荡机了，对吧？即使荡机了，我们下次再重启我们 ninecost， 它也会读这里的一个配置。然后我这边 有一个腾，呃，腾的音否，他就是一个空命名空间，命空间，我们在这边就是刚才建了个第一位，第一位开发环境配置，对吧？他在这边会通过通过里面的一个，我们看一下这边有一个 tend id， 它会去通过这个 tend id 去区分你这边到底是 public 还是 dv。 比如说我们这边还有一个生产环境，有一个测试环境的一个配置都可以建一套，然后对应的我们就把我们 narcost 的一个配置，然后呃自定义的持久化到我们这个库当中了。好，今天分享就到这里，谢谢大家。

分享一个用于 pina 持久化的插件，可通过 m p m 官网搜索 pina plug in percy state state 进行了解。这是我认为目前比较好用的一个插件，提供三种安装方式，在 view 三项目中安装 pina plug in percy stat state。 使用该插件需要提前安装 pina， 然后再导入安装好的 pina 持久化插件。 目前页面渲染的 pina 数据按钮，点击更新数据后并没有缓存的功能。 切换到 store 下的 index， 点 j s 文件，在 define store 内添加 persist 对象，设置 enable 的属性为 true。 开启缓存， 更改数据后对页面进行刷新，此时页面的 pina 的数据拥有了缓存。打开控制台的 local store 面板，发现数据被默认保存到了 local store。 当然把它保存到 session storage 也是可以的，通过 storage 来修改。 再来看它的两个其他属性， key 属性允许我们自定义缓存名称， pet 则是允许我们自定义需要缓存的数据，比如这里我指缓存 hobby 和 age。

唯有 es 中怎么做持久化管理？那么什么叫持久化？咱们再来演示讲一下啊，学生基本面试的时候持久化， 持久化就是才能够长期的存在，我估计学生能回答出这种问题。是吗？持久化呢？分前端持久化和后端持久化，其实都是缓存来做。前端持久化就是前端缓存， 后端尺的话就是后端缓存啊。那其实都是是通过啊，就是开始就是通过缓存来做，那缓存就那几个是吧？ local storage， 赛神 storage 啊， cookie， 还有一个数据库，还有个这个前端的，这个叫呃。 db 啊，前端 db， 后端呢？就是 reddies 是吧？开始啊 开始啊，什么都有都有。那么前段这句话用什么做的啊？用 locals store 为止是吧？ loco store。 同学说了，那我们自己写吧。注意啊，自己写也行啊，也可以用插件，插件最简单是吧？ 也可以用插件，插件的话就是配上去它自动给你存存啊。是自动给你取自提携也行，也可以用插件。那注意它的原理是什么？同学们提到了一个刷新页面，是不是 啊？为什么刷新音乐会要考虑持久化的问题呢？因为刷新页面所有的东西都销毁。刷新页面的话就涉及到一个又常见的面试题，就是当你在地址上输一个 ur 地址，他发生了什么事？就是把那个过程整个演绎，里边会先解析你的地址， 然后请求 dns 转发，先插本地 dns， 如果本地没有的话直接向远程服务器发地址，发地址之后给我服务端进行响应，响应给我一个页面，页面那边有。有文档对象管理模型吗？文档对象模型吗？啊？超文本标标记是吧？ 一秒里边给我返回标签，我就渲染标签，渲染标签遇到了 skype， 遇到了我们的盗墓结构，然后开始渲染，渲染的时候发现标签 接待 gs， 接待完 gs 之后呢，发现了 voes， voes 进行出手画，这时候呢，所有东西重来了，重来之后呢，我们 voes 也会重来，都会重来，所以说你要在什么呢？你要保证在重新初始化的时候，我们能够 读取到之前混储的数据，那么这个代码我们回到刚刚写的代码里边，我们在哪个位置读啊？注意在这个位置死的的这个位置，注意你有死的时候，我们这个代码是从上往下执行的，所以这时候呢，你看内幕，冒号的人老高这时候是不是写死了？他是从缓存中读的吗？不 是，这不是从缓存中读的是什么？他需要从缓存中读取啊？初始化的时候，这样的话是不是相当于，哎，我的状态一直没有丢过呀？但是还有一点， 假如说你改了呢？你没有提升，改了呢？所以说呢，我们还有一个点，就是第一个持久化怎么做？两步，两句话，一个是初始化的时候从缓臀中读，第二句话是什么？修改状态的时候存入缓存，就这两句话就能够实现咱们的 voes 持久化。