30_尚硅谷_Vue_案例_存储数据

比较大家看一下啊，譬如说我勾上它现在呢，我当前是个这样的状态是吧，我希望什么呢？我希望刷新的时候还是刚才那个状态。甚至于说我啊，现在是这个状态是吧，看到两个勾选的，我把当前浏览器关闭了。再打开。仍然是以前的状态。这说明要干嘛呀？是不是要缓存我们当前的这个数据啊。那缓存就有两个方面，是缓存在内存里面，还是缓存在文件里面。什么肯定是要文件，为什么呢？因为你浏览器关闭以后，内存是没了，对不对，然后我们需要的什么重新打开，是不是状态还在啊，诶这个时候可以利用到一个存储方式叫local story。哎，他是做本地的啊，存储的，而它本质上就是存储文件啊，也就是说浏览器关闭再打开还在不在在。

好，那有两个问题。存储啊，有两个问题，一个是什么时候存啊，另外什么时候读。要说还有个问题。到底存的是什么东西，你存一个什么东西进去。有三个方面，一个方面你存的是什么数据是吧，我们要存谁？你想我的界面显示根据谁显示的？To兔TH嘛，所以我要将to兔TH给了什么？存起来没问题吧，确定你的目标，下面一个什么时候存。对吧。OK，你要想能够使大家知道啊，我随便做任何操作以后，我再重新打开，应该是不是都是我最后的一个状态。对不对，那也就是说，只要我的界面的状态发生了改变，时刻要存。

这个时刻要程也有一有一个说明啊，得知道我的todo发生了什么。是不是一旦有改变就成？懂不懂这个改变啊，可能是删除。对吧，可能是添加。也可能是勾血。对吧，啊，任何一个操作都应该存起来，重新再存。好，大家说一下什么时候读了。什么是？一上来显示就应该读吧。这能不能到你们打开就应该读吗。那也就是说啊，来看它。现在我的这个数据我是写死的，看到吧，这肯定不对。不能写死对不对，也就是说此时就应该干嘛去。是不是读懂吧，从local story中读取to。

这读吧，好，下面一个什么时候保存呢？是不是一旦我的这个todo发生了变化，就应该去保存？那这个得用什么技术呢？这个得用到我们前面提过的一个东西叫深度监视。首先得有监视，监监视什么意思？就监视它的改变呢？而且要什么呢？深度，为什么说是要深度呢？因为只要它内部发生了任何的变化，我都得知道。我用一般监视不行，一般监视它只能监视最外层的。这个吧，我要监视的是任何的改变。所以我这里面啊，打开了网。那要监是需要写一个配置啊。所以大家知不知道有个什么呢，Watch。对吧，好，这就是去监视去的啊监视。

而且有个概念叫什么呢？深度监视是吧，好，我们先写的，先把这个写了，这个好解好，这个地方我是要通过，我不知道它这个语法学过吗。学过是吧？啊点local storage，它有一个方法叫get it。它存的时候以什么形式存的一个K对应一个什么value，而且大家要注意啊，存的是文本。记住存的是文本字符串，但是我手里啊，需要得到的是一个什么类型？是不是宿主？对吧。那比如说我的K，你要设计个K啊，假设我就叫todo k吧。现在得到的是to数组吗？不是，是一个什么。字符串。那是一个字符串，怎么样的字符串才能转换成数组啊？对，什么格式才能行？

节省格式。对吧，所以我这里面得到的应该是个什么省格式的字符串，对吧，那我下面要干嘛节省点pass解析解析谁。是不是他？这不能懂吗？这个返回的是个阶层字串嘛，我来解析，但是这里面存在另外一个问题，有可能我这个就没有值。我开始最先的时候，我有存吗？没有，我要去取，如果没有，值它返回的是什么？No。那你去解析个合适吗？那不合适，也就是如果我没有数据，应该它的值应该是个什么值。应该是个这样的姿势比较好的。对不对，应该是这个值是比较合适，关键我要怎么处理才能做到这一点呢？

也就是说，如果它有值，是不是就解析它，如果它没值了。解析这里面加什么？后面呢？后面写什么？写这个吗？是吗？是不是这个，关键问题来了，是不是这个。不是。我们解析这个pass里面传的参数应该什么类型。字符串，我现在是字符串吗？不是，所以怎么办？能不能看到这样才对？那也就是说我存了数据，那就解析我是吧，如果没乘，是不是解析这个数组字符串。最终得到就是什么空数组。是不是这个啊，它必须是一个数组啊，记住。好，这是去。

解析下面我们来说监视，监视的语法是这么写的啊，前面没写过，我写一下todo啊，先要说明一下我是什么呢？To to什么意思呢？这个deep深度的意思啊，就代表什么深度监视。对不对。能弄不好下面。你这个监视是不是有个处理的回调函数？这个window要有一个处理的回调函数，它里面有个配置，来，我写一下叫handler function，里面有一个new，有一个old。好，我要问大家，这个new是谁的啊？到底是谁的，你就说是谁的。对，你说到点上to的value就old value，我不需要，我就需要什么new value，所以我就直接写个value得了。

好，那也就是说我要将这个最新的值干嘛去，将todo最新的值保存到哪个里面去，Local storage里面去，怎么保存呢？window.local storage点。一个get get对应的什么？下好这个K，我写个叉叉行吗？行不行？我就这么好，譬如说有人说老师你要写个to，我写个to lose行不？行还是不行？那我应该怎么写呢？是不是要跟这个曲的要什么，是不是要一致。能不能看到。好，但是这样还有问题。你现在存的是个什么？存的是不是个数组，我们说过了，我们要存的是个节省格式的字符串，对不对，是吧，你现在是接省格式字符串吗？不是，那怎么办呀？啊，接省点使军犯船。

记住，你存的是节省，取的也是嘛，节省。哎的哎，这里面有一个的什么节省数据。啊，保存到local story，这里要强调一下是它的节省数据，而不是它本身。你要从它本身，它会调用这个value to string方法，那你解析不出来了，就。啊，这一个数主动啊这个程序方法最终你想解析出来是不太可能的。啊，那格式就不对。啊，这里面有两个是啊，一个是他。啊，我们上来要去读，再一个我们需要去存，这个存用到一个概念叫什么呢？深度监视。

好，现在我们来去搞一搞，现在一个都没有吧，一个都没有好了。添加一个吧，再添加一个，接着我还有意的勾一个。可以吧，好，我把它关了。在干嘛打开，打开以后呢，去访问好很关键啊，走你。对不对对的好，我要怎么检查那个数据存在哪呢。怎么检查？检查。找哪个选项，关键是。找哪个选项I。找application里面什么呢？Local storage选择这一个。有一个什么todo是K乘的，是不是一个数组字符串？能看到吧，啊能啊，这说明没有问题。

啊，而且这个数据啊，关闭以后再打开是不是还在啊，又这么个事。好，这是这个。