KV 存储

localStorage 是…

• 好的！这是一个非常容易使用的 API。

localStorage.setItem('name', 'Chris'); let name = localStorage.getItem('name');

• 坏的！Philip Walton 解释了原因

localStorage 是一个同步 API，它会阻塞主线程，并且每次访问它时，您都可能阻止页面交互。

Chrome 有一个想法（这是提案）来重新设计它。 最终，API 甚至更简单

import { storage } from 'std:kv-storage';
storage.set('name', 'Chris');
storage.get('name');

但是！它是异步的，所以我可以使用 await 在我执行这些操作之前而不阻塞任何内容。 此演示现在将在 Chrome Canary 中运行

查看 Pen
eXadrq by Chris Coyier (@chriscoyier)
在 CodePen 上。

这行代码到底是怎么回事？

import { storage } from 'std:kv-storage';

他们称它为“内置模块”。换句话说，您可以导入的东西，但它不会发出网络请求，因为它内置在浏览器中。非常有趣的方法。

Philip 继续说道

不全局暴露内置模块有很多好处：它们不会给启动新的 JavaScript 运行时上下文（例如新标签页、工作线程或服务工作线程）增加任何开销，并且除非实际导入，否则它们不会消耗任何内存或 CPU。此外，它们不会冒与代码中定义的其他变量发生命名冲突的风险。

它建立在 indexedDB 之上，因此如果您在玩它并需要清除值或其他操作，您可以在那里进行操作（开发者工具 > 应用程序 > 存储 > IndexedDB）。看看它是否流行起来，以及新的 JavaScript 功能是否会作为内置模块发布，这将是一件很有趣的事情。我无法确定其他浏览器是否认为这是一个好主意。

直接链接 →