关于localStorage与sessionStorage的区别与使用

目录

 

关于localStorage与sessionStorage的区别与使用

介绍

主要区别

相同之处：

使用Web Storage的一些优点：

使用方法：

项目中的实际应用

1.结合localStorage实现路由守卫，用户实现一次登录即可

2.结合sessionStorage实现用户在一次会话中保存数据，实现页面的二级密码

---

关于localStorage与sessionStorage的区别与使用

介绍

在Html5主要更新两个与本地储存相关的的内容：

• Web Storage
• 本地数据库

Web Storage是对h4中cookie机制的一个改善

本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

下面主要说一下通过项目对Web Storage的理解以及一些使用

其中Web Storage主要分为两种：

1. localstorage
2. sessionstorage

主要区别

两者的主要区别为：localstorage为永久储存，sessionstorage为临时储存

1. 其中session是指用户在浏览某个网站时，从进入网站到浏览器关闭的所经过的时间。seesion对象可以用来保存在这段时间内要求保存的任何数据---生命周期仅在当前会话下有效
2. localstorage通常将数据保存在客户端本地的硬件设备中，即使浏览器关闭了以后，数据仍然存在。----生命周期是永久的

相同之处：

1. 存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
2. 存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
3. 存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

使用Web Storage的一些优点：

1. 相对cookie而言，储存空间更大，为5MB
2. 节省流量：Web Storage不会WebStorage不会传送到服务器，存储在本地的数据可以直接获取，少了客户端和服务器端的交互
3. sessionStorage对于只需要在浏览器当前会话下保存的数据非常方便
4. 快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多

使用方法：

1. setItem (key, value) ——  保存数据，以键值对的方式储存信息。
2. getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。
3. removeItem (key) ——  删除单个数据，根据键值移除对应的信息。
4. clear () ——  删除所有的数据
5. key (index) —— 获取某个索引的key

项目中的实际应用

1.结合localStorage实现路由守卫，用户实现一次登录即可

在用户登录之后，在localstorage中存入一个值，在用户以后登录的时候判断localstorage中是否有这个指定的值，如果有就直接跳转到首页（指定的页面）

localStorage.setItem('token','admin')

router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
      let token = localStorage.getItem('token')
        
      if (token) {
        next('/home')
      } else {
        next()
      }
    }
    else{
      let token = localStorage.getItem('token')
        if (!token) {
          next('/login')
        } else {
          next()
        }
    }
})

2.结合sessionStorage实现用户在一次会话中保存数据，实现页面的二级密码

sessionStorage.setItem('token','admin')

if(to.path === '/usermanage'){
      if(sessionStorage.getItem('admin')){
        next()
      }else{
        next('/')
      }
    }