iview中的input表单中输入的数据刷新后不会被清除的方法
表单中的数据填写到一半刷新网页的话会清楚里面已经储存的数据,这样的体验对于用户来说很不好,此篇文章是在vue中使用了iview中input组件,通过sessionStorage这个对象来优化。
选择的是sessionStorage,选择的原因vue是单页面应用,操作都是在一个页面跳转路由,另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。
这里用到了sessionStorage的setItem和getItem两个方法:
setItem方法是用来储存数据到sessionStorage对象中
这里先对浏览器进行了一个判断,看是否支持sessionStorage,然后在input标签中用了v-model来双向绑定数据,这里的projName1写的有些多余了,可以直接设置value来接受用户输入的值,然后用sessionStorage里面的setItem方法来保存这个值,其中key的值可以自己随便设置,但是一会取出用户输入的值时要输入相应的key。
因为这里是在vue中使用的那么我们取出sessionStorage里面值的操作可以写在created()里面:
至此表单中的数据就不会因为刷新而消失。本人技术不够,如果有错误或者有更好的办法就欢迎大家指出。
原作者姓名:brook2
原出处:CSDN
原文链接:表单中数据在页面刷新后不会被清除的方法_brook2的博客-CSDN博客