localStorage和sessionStorage的区别及用法

199 阅读1分钟

最近在做一个管理系统项目的时候,因为要登录验证用户并颁发token,一开始是把token存储在localStorage中,但是后来并不想token长时间存储在本地而是每次关闭页面后都要重新进行登录,所以换成sessionStorage存储token。下面我们就来谈谈localStorage和sessionStorage的异同和相关的API。

localStorage和sessionStorage的异同点

首先localStorage和sessionStorage有很多相同之处

  • 都是用来存储客户端临时信息的对象
  • 储存的对象类型均为字符串类型
  • 存储空间限制大小为 5M

其次也有许多不同之处

  • localStorage 存储在本地的数据是永久有效不会过期的,可以一直被访问,直到这些数据被删除;而sessionStorage 存储的数据的生命周期是一个会话,会话结束后数据也随之销毁
  • 相同浏览器的同源页面间可以共享相同的localStorage,而sessionStorage只能在同一窗口中访问

localStorage和sessionStorage的相关API

localStorage 和 sessionStorage 有着统一的API接口,这为二者的操作提供了极大的便利。下面以 localStorage 为例来介绍一下 API 接口使用方法,同样这些接口也适用于 sessionStorage。

  • 存储数据

  1. 采用setItem()方法存储 (推荐用法)
localStorage.setItem('key','value');
  1. 通过属性方式存储
localStorage.key = 'value';
或 localStorage['key'] = 'value';
  • 获取数据

  1. 通过getItem()方法取值(推荐用法)
localStorage.getItem('key');
  1. 通过属性方式取值
localStorage.key;
或 localStorage['key'];
  • 删除数据

  1. 删除指定数据
localStorage.removeItem('key')
或 delete localStorage.keydelete localStorage['key']
  1. 删除所有数据(包括localStorage和sessionStorage)
localStorage.clear();