表单中数据在页面刷新后不会被清除的方法

iview中的input表单中输入的数据刷新后不会被清除的方法

表单中的数据填写到一半刷新网页的话会清楚里面已经储存的数据，这样的体验对于用户来说很不好，此篇文章是在vue中使用了iview中input组件，通过sessionStorage这个对象来优化。

选择的是sessionStorage,选择的原因vue是单页面应用，操作都是在一个页面跳转路由，另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。

这里用到了sessionStorage的setItem和getItem两个方法：
setItem方法是用来储存数据到sessionStorage对象中

 sessionStorage.setItem("key", "value");

getItem是用来从sessionStorage中取出数据

 var value = sessionStorage.getItem("key");

接下来看一个实例：

<Input @on-blur="saveToStorage" type="text"  v-model="projectForm.collectionName"  />

这里设置的是当输入框失去焦点时触发时会触发saveToStorage函数

  saveToStorage(){
   
   
        if (window.sessionStorage) {
   
   
          this.projectName1 = this.projectForm.collectionName
          let value =this.projectName1
          window.sessionStorage.setItem("pName",value)
        }
        },

这里先对浏览器进行了一个判断，看是否支持sessionStorage，然后在input标签中用了v-model来双向绑定数据，这里的projName1写的有些多余了，可以直接设置value来接受用户输入的值，然后用sessionStorage里面的setItem方法来保存这个值，其中key的值可以自己随便设置，但是一会取出用户输入的值时要输入相应的key。

因为这里是在vue中使用的那么我们取出sessionStorage里面值的操作可以写在created（）里面：

created(){
   
   
     if (window.sessionStorage) {
   
   
        const name = window.sessionStorage.getItem("pName");
        if(name !='' || name != null){
   
   
          this.projectForm.collectionName=name
        }
      };
      }

至此表单中的数据就不会因为刷新而消失。本人技术不够，如果有错误或者有更好的办法就欢迎大家指出。

来源：oschina

链接：https://my.oschina.net/u/4387680/blog/4732003

标签

html5