js的cookies及html5的localStorage、sessionStorage

1、首先，理解什么是cookies?

cookies：存储在客户端，数据量小的，会过期的数据，以字符串形式存储

cookie操作代码示例：

2、localStorage及sessionStorage

session:以键值对形式存储在服务端的数据
localStorage及sessionStorage:以键值对形式存储在客户端的数据

操作示例：

3、cookie和localStorage及sessionStorage的区别

• cookie会过期，数据小，每次url请求会携带cookies信息,同源窗口访问
• localStorage数据比cookies大，客户端持久化存储，url请求不携带，同源窗口访问
• sessionStorage与localStorage相似，但是有效时间为一个会话期间，只能由当前浏览器的窗口共享数据

4、实战，用sessionStorage模拟一个首页验证登陆的功能

部分代码：

            if(this.loginForm.username != sessionStorage.getItem('username')){
                alert('用户名填写错误!')
            }else if(this.loginForm.password != sessionStorage.getItem('password')){
                alert('用户密码填写错误!')
            }else{
                this.$router.push({path:'/',query:{username:this.loginForm.username}})
            }

github地址：[https://github.com/Zxq-zn/vuemanager/tree/master/src/components/login]