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
}
};
}
至此表單中的資料就不會因為重繪而消失，本人技術不夠，如果有錯誤或者有更好的辦法就歡迎大家指出，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225377.html
標籤：其他