HTML5浏览器存储WebStorage

HTML5浏览器存储 WebStorage

基本介绍

WebStorage：

​ WebStorage是HTML5为克服cookie的缺陷而发布的一种浏览器中存储信息的技术。

cookie的缺陷：

1. 大小受限，单个项目有4k限制。 abcd=4个字节 1024个字节=1k 1024k=1MB
2. 用户可以操作（禁用）cookie，使功能受限。
3. 每次请求时，cookie都会存放在请求头中，请求被拦截，cookie数据会存在安全隐患。

WebStorage的特点：

1. 存储空间更大，单个项目 Chrome，Firefox和Opera 数据大小可以达到 5MB， IE是10M 。
2. 只能存储JSON字符串类型。
3. 不会被爬虫抓取到，更安全 。

WebStorage的分类：

WebStorage的使用具体分为两种：localStorage 和 sessionStorage。

• localStorage（持久存储），关闭浏览器之后localStorage中的数据也不会消失。除非主动删除数据，否则数据永远存在。
• sessionStorage（会话存储），临时存储，数据只在当前会话下是有效的，只要这个浏览器/标签窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在，关闭浏览器/标签窗口后数据就会被销毁。

应用场景：

localStorage：用于长期登录（判断用户是否已登录），适合长期保存在本地的数据。

sessionStorage：敏感账号一次性登录。

相关方法

WebStorage操作的相关方法：

setItem (key, value) 	 // 保存数据，以键值对的方式储存信息。
getItem (key) 			//  获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) 		//  删除单个数据，根据键值移除对应的信息。
clear () 			    //  删除所有的数据

使用的时候需要设置前缀，例如

// 通过localStorage和sessionStorage实现数据存储给浏览器
window.localStorage.setItem('city','北京')    // 保存数据
window.localStorage.getItem('city')          //  获取数据

window.sessionStorage.setItem('weight','200')    // 保存数据
window.sessionStorage.getItem('weight')          //  获取数据

获取方式：

• localStorage：window.localStorage;
• sessionStorage：window.sessionStorage;

案例应用

利用 " 守卫 + sessionStorage +路由+编程式导航" 实现非登录用户，访问后台首页就强制去登录的效果。

如何保持用户登录状态：

​ 实际项目中：用户输入用户名、密码后，该账号信息需要给到服务器端做校验，校验成功，后台系统会给客户端浏览器传递一个秘钥信息 token，表明当前账号已经登录系统，客户端浏览器把token保存起来，后期每次向服务器端发起请求的时候，都要把这个token带着，以便服务器端识别当前账号是通过验证的，因此可以通过浏览器中是否有token表明用户是否处于登录状态。

步骤：

在main.js中引入相关组件，并配置路由，同时设置路由守卫，使得非登录用户要访问后台页面，就强制登录。

// main.js
// 导入各个业务组件
import Home from './components/Home.vue'
import Login from './components/Login.vue'

// 注册路由中的相关组件
Vue.use(VueRouter) // 插件

// 创建一个路由对象
const router = new VueRouter({
  routes:[
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home}, 
    {path:'/login', component:Login},
  ]
})

// 路由守卫简单使用[全局前置守卫，所有路由都生效]
router.beforeEach(function(to,from,next){
  // "非登录"用户禁止访问后台页面，相反可以访问login登录页面
  let tk = window.sessionStorage.getItem('token')
  // "没有token"，并且还要访问"home页面[非login登录页面]"，就强制登录
  if(!tk && to.path!=='/login'){
    // return会停止后续代码执行
    return next('/login')
  }
  next() // 放行
})