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图,节约不必要的时间浪费。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,477评论 19 139
  • 【SESSIONSTORAGE, LOCALSTORAGE, COOKIE】 小课堂【武汉第156期】 分享人:庄...
    庄引之阅读 4,383评论 0 6
  • 《ilua》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 1...
    叶染柒丶阅读 13,791评论 0 11
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,158评论 24 450
  • 情绪地图呈现的是人类最为基本的八大类型的情绪,情绪地图是我们了解情绪和学习情商技能的重要工具。 这张情绪地图告诉我...
    金石明镜阅读 14,434评论 0 3