localStorage与sessionStorage
每日更新前端基础,如果觉得不错,点个star吧
https://github.com/WindrunnerMax/EveryDay
localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案
相同点
- 都与
HTTP无关,是HTML5提供的标准,当发起HTTP请求时不会与Cookie一样自动携带 - 都是以键值对的形式存在,即
Key-Value形式,常用的Api也相同 - 存储类型都是
String类型,当进行存储时,会调用toString()方法转为String类型 - 对于每个域容量是有限的,不同浏览器不一样,大部分存储为
5M左右
不同点
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。SessionStorage会在用户关闭浏览器后,即会话结束后,数据失效;SessionStorage与服务端Session无关。
常用操作
- 储存数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
/**
* 由于存储数据会调用 toString() 方法
* Object 类型会存储为 [object Object] 字符串
* 所以进行存储时需调用 JSON.stringify() 转化为字符串
* 取出时调用 JSON.parse() 将字符串转回对象
*/
- 读取数据
localStorage.getItem('key');
sessionStorage.getItem('key');
- 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');
- 清空数据
localStorage.clear();
sessionStorage.clear();