最简单的vue3组件之间传值

Source

localStorage 是 HTML5 引入的一个 Web Storage API 的一部分,它允许网页在用户的浏览器上存储数据。localStorage 提供了一种持久化的本地存储方案,数据不会因为浏览器关闭而丢失,除非用户或脚本显式地删除它们。

localStorage 是一种非常实用的前端存储技术,尤其适合那些不需要服务器交互就可以持久化存储的数据场景。

特点

  • 持久性:存储在 localStorage 中的数据会一直保留,直到被用户或脚本明确清除。
  • 容量大:相较于 cookies,localStorage 提供了更大的存储空间,一般为 5MB 左右,具体取决于浏览器实现。
  • 键值对存储:数据以键值对的形式存储,键和值都是字符串。
  • 安全性:存储在 localStorage 中的数据只能被同一源策略下的脚本访问,即同源策略限制了跨域数据访问。

基本用法

localStorage.setItem('key', 'value');

const value = localStorage.getItem('key');

localStorage.removeItem('key');

localStorage.clear();

生命周期

localStorage 中的数据生命周期很长,除非用户手动清理浏览器缓存或脚本调用 clear() 或 removeItem() 方法,否则数据将永久保存。

例如

存储

获得