最近在做一个管理系统项目的时候,因为要登录验证用户并颁发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。
-
存储数据
- 采用setItem()方法存储 (推荐用法)
localStorage.setItem('key','value');
- 通过属性方式存储
localStorage.key = 'value';
或 localStorage['key'] = 'value';
-
获取数据
- 通过getItem()方法取值(推荐用法)
localStorage.getItem('key');
- 通过属性方式取值
localStorage.key;
或 localStorage['key'];
-
删除数据
- 删除指定数据
localStorage.removeItem('key')
或 delete localStorage.key
或 delete localStorage['key']
- 删除所有数据(包括localStorage和sessionStorage)
localStorage.clear();