localStorage - 没有时间限制的数据存储
var arr=[1,2,3];
localStorage.setItem("temp",arr); //会返回1,2,3
console.log(typeof localStorage.getItem("temp"));//string
console.log(localStorage.getItem("temp"));//1,2,3
localStorage.setItem() 不会自动将Json对象转成字符串形式
var obj = {"a": 1,"b": 2};
typeof localStorage.getItem("temp2");//也会返回String
localStorage.setItem("temp2", obj);//但是返回[object Object]
用localStorage.setItem()正确存储JSON对象方法是:
存储前先用JSON.stringify()方法将json对象转换成字符串形式
JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串
var obj = {"a": 1,"b": 2};
obj = JSON.stringify(obj); //转化为JSON字符串
localStorage.setItem("temp2", obj);//返回{"a":1,"b":2}
后续要操作该JSON对象,要将之前存储的JSON字符串先转成JSON对象再进行操作
obj=JSON.parse(localStorage.getItem("temp2"));
在src文件目录下, 新建一个util文件夹, 里面建storage.js:
storage.js
// 获取
export function getLocalStorage(key){
return localStorage.getItem(key);
}
// 保存
export function setLocalStorage(key, value){
localStorage.setItem(key, value);
}
// 获取
export function getObjectLocalStorage(key){
return JSON.parse(localStorage.getItem(key));
}
// 保存
export function setObjectLocalStorage(key, value){
localStorage.setItem(key, JSON.stringify(value));
}
// 删除
export function removeLocalStorage(key){
localStorage.removeItem(key);
}
main.js:
import {getLocalStorage, setLocalStorage, getObjectLocalStorage, setObjectLocalStorage, removeLocalStorage} from './util/storage'
Vue.prototype.$getLocalStorage = getLocalStorage;
Vue.prototype.$setLocalStorage = setLocalStorage;
Vue.prototype.$getObjectLocalStorage = getObjectLocalStorage;
Vue.prototype.$setObjectLocalStorage = setObjectLocalStorage;
Vue.prototype.$removeLocalStorage = removeLocalStorage;
home.vue
template:
<div style="margin-top:2rem;">
<input type="text" v-model.trim="inputnum">
<button @click="setitem">设置</button>
<button @click="constorage">控制台输出</button>
<button @click="remove">删除</button>
</div>
script:
data(){
retuen{
inputnum : 0
}
},
methods:{
setitem(){
this.$setLocalStorage('inputnum', this.inputnum);
},
constorage(){
console.log(this.$getLocalStorage('inputnum'));
},
remove(){
this.$removeLocalStorage('inputnum');
}
}
这是一个简单的demo, 没有写样式
可以按F12到这里查看你的缓存的变量
localStorage的生命周期是永久的,真实项目中不建议使用。大家可以使用Vuex作为数据存储