随笔录--浏览器的本地存储方式有哪些

官方解析

浏览器的本地存储方式主要有以下几种：

1. Cookie：Cookie 是浏览器中最古老的本地存储方式，它可以存储少量的文本数据，并在之后的 HTTP 请求中自动携带发送给服务器。Cookie 可以设置过期时间，也可以设置作用域（只在特定域名或路径下有效）。应用场景：一般用于存储会话信息、用户偏好设置等少量的文本数据。

2. LocalStorage：LocalStorage 是 HTML5 新增的本地存储方式，可以存储较大量的数据，数据保存在浏览器本地且不会过期，除非手动删除或清除缓存。应用场景：适用于存储用户个性化数据、本地数据缓存等。

3. SessionStorage：SessionStorage 也是 HTML5 新增的本地存储方式，与 LocalStorage 类似，但是数据只在会话期间有效，会话结束或关闭浏览器后数据会被清除。应用场景：适用于需要短期保存数据的场景，如表单数据暂存、页面数据缓存等。

4. IndexedDB：IndexedDB 是 HTML5 中的一个本地数据库存储方案，可以存储大量结构化数据，支持事务处理和索引查找，功能比较强大。应用场景：适用于需要离线存储数据、本地数据库操作等。

5. Web SQL：Web SQL 是 HTML5 中的另一种本地数据库存储方案，采用 SQL 语句进行数据存储和查询，但是目前已经被弃用，不建议使用。应用场景：类似于 IndexedDB，适用于需要离线存储数据、本地数据库操作等。

不同的本地存储方式适用于不同的场景，选择合适的方式可以提高用户体验和网站性能。

 

ES6 中的 Reflect 对象有什么用？

我么来看看常见的浏览器的本地存储方式：localStorage、sessionStorage、indexedDB、Cookies

webStorage：

localStorage:
用于存储持久数据，除非用户手动将其从浏览器中删除，否则数据经终身存储，即使用户关闭窗口后选项卡，他也不会过期

sessionStorage：
用户存储临时会话数据，页面重新加载后数据仍然存在，当关闭浏览器或选项卡时数据就会丢失；

方法和属性：

● setItem() ：用于存储数据，它有两个参数，即 key 和 value。使用形式：localStorage.setItem(key, value)；
● getItem()：用于获取数据，它接受一个参数 key，即需要访问其值的键。使用形式：localStorage.getItem(key);
● removeItem()：用于删除数据，它接受一个参数 key，即需要删除其值的键。使用形式：localStorage.removeItem(key);
● clear() ：用于清除其中存储的所有数据，使用形式：localStorage.clear();
● key()：该方法用于获取 localStorage 中数据的所有 key，它接受一个数字作为参数，该数字可以是 localStorage 项的索引位置。localStorage 和 sessionStorage 都非常适合缓存非敏感应用数据，可以再需要存储少量简单值，它们本质是同步的，并且会阻塞主 UI 线程，所以需要谨慎使用。

Cookie：

Cookie 主要用于身份验证和用户数据持久性。Cookie 与请求一起发送到服务器，并在响应时发送到客户端；因此，cookies 数据在每次请求时都会与服务器交换。服务器可以使用 cookie 数据向用户发送个性化内容。严格来说，cookie 并不是客户端存储方式，因为服务器和浏览器都可以修改数据。它是唯一可以在一段时间后自动使数据过期的方式。每个 HTTP 请求和响应都会发送 cookie 数据。存储过多的数据会使 HTTP 请求更加冗长，从而使应用比预期更慢：
● 浏览器限制 cookie 的大小最大为4kb，特定域允许的 cookie 数量为 20 个，并且只能包含字符串；
● cookie 的操作是同步的；
● 不能通过 web workers 来访问，但可以通过全局 window 对象访问。Cookie 通常用于会话管理、个性化以及跨网站跟踪用户行为。我们可以通过服务端和客户端设置和访问 cookie。Cookie 还具有各种属性，这些属性决定了在何处以及如何访问和修改它们，

Cookie 分为两种类型：

● 会话 Cookie：没有指定 Expires 或 Max-Age 等属性，因此在关闭浏览器时会被删除；
● 持久性 Cookie：指定 Expires 或 Max-Age 属性。这些 cookie 在关闭浏览器时不会过期，但会在特定日期 (Expires) 或时间长度 (Max-Age) 后过期。

IndexedDB：

IndexedDB 提供了一个类似 NoSQL 的 key/value 数据库，它可以存储大量结构化数据，甚至是文件和 blob。每个域至少有 1GB 的可用空间，并且最多可以达到剩余磁盘空间的 60%。

indexedDB 特点如下：

● 可以将任何 JavaScript 类型的数据存储为键值对，例如对象（blob、文件）或数组等。
● IndexedDB API 是异步的，不会在数据加载时停止页面的渲染。
● 可以存储结构化数据，例如 Date、视频、图像对象等。
● 支持数据库事务和版本控制。
● 可以存储大量数据。
● 可以在大量数据中快速定位/搜索数据。
● 数据库是域专用的，因此任何其他站点都无法访问其他网站的 IndexedDB 存储，这也称为同源策略。

IndexedDB 使用场景：

● 存储用户生成的内容：例如表单，在填写表单的过程中，用户可以离开并稍后再回来完成表单，存储之后就不会丢失初始输入的数据。
● 存储应用状态：当用户首次加载网站或应用时，可以使用 IndexedDB 存储这些初始状态。可以是登录身份验证、API 请求或呈现 UI 之前所需的任何其他状态。因此，当用户下次访问该站点时，加载速度会增加，因为应用已经存储了状态，这意味着它可以更快地呈现 UI。
● 对于离线工作的应用：用户可以在应用离线时编辑和添加数据。当应用程序来连接时，IndexedDB 将处理并清空同步队列中的这些操作。