LocalStorage与SessionStorage

时间:2022-07-24
本文章向大家介绍LocalStorage与SessionStorage，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

localStorage与sessionStorage

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();

随机文章
本站知识点必读
最近更新