localStorage（9.22）

问题描述

当用户在写总结的时候不小心关闭了浏览器的窗口，怎么办？为了把之前没提交的总结保存下来，我使用localStorage.我的代码如下：

handleInputChange(tag, e) {
   storage.setItem(tag, e.target.value);
   console.log(storage.getItem(tag)); //输出的值为undefined
 }

矛盾点

通过打印发现e.target.value的值确实是存在的，setItem理论上是可以把字符串存进localStory中，可为什么我存不进去？

问题

Q1:既然e.target.value是有值的，那存不进去是不是我调用的localStory的api是有问题吗？
A1:网上查看接口，setItem是存储数据，第一个参数是key值，第二个参数是对应的value,getItem是获取存储的数据的，参数是key值；所以对api的使用时没有问题的。

Q2: api没有问题，那么是存入的值的问题吗？
A2:我将e.target.value的值换成字符串```abc``

handleInputChange(tag, e) {
   storage.setItem(tag, "abc");
   console.log(storage.getItem(tag)); //输出的值为abc
 }

所以问题的存在还是在e.target.value值上

Q3:e.target.value是什么类型的值，为什么它存不进去？
A3 : 看代码发现e.target.value是json类型的数据，去网上查看发现，localStorage存储json数据的时候必须要用JSON.stringify(e.target.value)将存储的json值转化为字符串。获取后的值是带引号的，也需要JSON.parse(storage.getItem("content"))才能将其还原。

问题解决：将e.target.value的值用JSON.stringify进行转化即可。

反思

学习前端这么久第一次用h5的本地存储法来存储数据，网上看文档的时候明明看到localStorage对json字符串的处理方法，但觉得我用不上就没有看细节，而且最开始看的时候也没有发现e.target.value是json字符串，最后还是掉到坑里才反应过来。

action

看文档的时候还是要仔细，不能觉得我用不上就不看这个细节了。解决问题要一步一步的来，tasking 图是解决问题的一个好方法，下次掉到坑里用tasking图，节约不必要的时间浪费。