Vue中localstorage和sessionstorage的使用
请在这里选择你想要的LocalStorage和SessionStoragelocalStorage使用方法Vue中实现用例Vue中使用LocalStorage和SessionStorageLocalStorage和SessionStorage在使用之前,我们先废话的了解一下LocalStorage和SessionStorage1.sessionStorage(临时存储):为没一个数据维持...
·
LocalStorage和SessionStorage
在使用之前,我们先废话的了解一下LocalStorage和SessionStorage
1.sessionStorage(临时存储):为没一个数据维持一个存储区域,浏览器打开会创建,关闭浏览器就会消失。
2.localStorage(长期存储):和前者一样,区别在于浏览器关闭后数据依然存在。
因为两者差不多,所以我已localStorage为例
localStorage使用方法
保存
保存到localStorage,如果保存的是个对象,那么需要把数据转换为JSON格式,字符则不需要
/*保存*/
/*对象*/
var user = {
name : 'admin',
password: 'password'
}
/*字符*/
var str = 'hello';
localStorage.setItem("user",JSON.stringify(user)); //需要先转换为JSON
localStorage.setItem("hello",JSON.stringify(str));
获取
/*对象*/
var user = localStorage.getItem("user"); //现在user是一个字符串
//如果需要读取user中对象则需要把user转换为一个对象
user = JSON.parse(user);
name = user.name
删除
/*指定删除*/
localStorage.remove("user");
/*全部删除*/
localStorage.clear();
浏览器查看
Vue中实现用例
本例中以登录为例,使用了Element-UI。
首先创建一个登录页面:
<template>
<div class="hello">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名:">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码:">
<el-input v-model="form.pwd"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="login()">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
form: {
name: "",
pwd: ""
}
}
},
methods: {
login() {
if ((this.form.name == "admin") && (this.form.pwd == "123")) {
var user = JSON.stringify(this.form);
this.$message({
message: '恭喜你,登录成功!',
type: 'success'
});
localStorage.setItem("user", user);
this.$router.push({
path: '/index'
})
} else {
this.$message("用户名或密码错误!");
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
width: 50%;
margin: 0 auto;
}
</style>
然后是登录成功之后的页面:
<template>
<div>
<el-row v-if="name!=''">
<el-col :span="3">欢迎您:</el-col>
<el-col :span="4">{{name}}!</el-col>
<a @click="loginout()">注销</a>
</el-row>
<el-row v-else>
<el-col :span="3">您还未登录!</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: "",
name: ""
}
},
created() {
this.checkLogin()
},
methods: {
checkLogin() {
var user = JSON.parse(localStorage.getItem("user"));
if (user) {
this.name = user.name
}
},
loginout() {
localStorage.removeItem("user")
this.$message({
message: '注销成功!',
type: 'success'
});
this.$router.push({
path: "/"
})
}
}
}
</script>
<style>
.el-col {
font-size: 20px;
}
</style>
配置路由:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
mode: "history",
routes: [{
path: "/index",
name: "index",
component: index
},
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
}
]
})
展示
登录页面
登录成功后
删除储存的内容
当想伤处储存的内容时,也提供了一个removeItem
的方法
localStorage.removeItem("user");
存储对象时发现的问题
如果再localStorage中存储的是一个对象,那么在取值时可能会发生我这种情况。
let user = {
username : "张三",
password : "123456"
}
localStorage.setItem("user",user);
console.log(localStorage.getItem("user"))
输出结果:
发现无法正确读取对象中内容,目前发现最好的方法时先将对象转换成JSON,再保存就可以正常输出了,注意读取的时候再转换为对象:
let user = {
username : "张三",
password : "123456"
}
localStorage.setItem("user",JSON.stringify(user));
console.log(JSON.parse(localStorage.getItem("user")))
输出结果:
更多推荐
已为社区贡献5条内容
所有评论(0)