{"componentChunkName":"component---src-templates-blog-post-js","path":"/you-will-stop-using-localstorage/","webpackCompilationHash":"da658d138a5c02dfedf3","result":{"data":{"site":{"siteMetadata":{"title":"八王子わんにゃんクラブ","author":"technology unit of JOHAQ.COM.","siteUrl":"https://svc-802-wannyan-club.johaq.com","keywords":["八王子わんにゃんクラブ"],"disqusShortname":"johaq-com"}},"markdownRemark":{"id":"86fe2fee-e055-58f6-aea2-b2bc6d1b1b83","excerpt":"When LocalStorage first appeared as part of HTML5 specification, web developers were excited because it exposed a simple way to save and retrieve data in and…","timeToRead":3,"html":"

When LocalStorage first appeared as part of HTML5 specification, web developers were excited because it exposed a simple way to save and retrieve data in and from the user’s browser.

\n

In this post, we will have a look at a new WICG proposal that aims to be a more performant alternative to LocalStorage.

\n
\n

This blog post talks about a potential future web platform feature called “KV Storage” (short for “Key-Value Storage”). This is currently a proposal made by the Web Incubator Community Group and it should not be used in production environments.

\n
\n

The LocalStorage Interface

\n

The LocalStorage interface allows the developer to store data in the browser in the form of key-value pairs, where both the key and the value are strings. The data is persisted across browser sessions and its scope is limited to the origin where the script that accesses LocalStorage resides.

\n

API

\n

Saving Data

\n

To save data to LocalStorage, simply call the setItem(key, value) method exposed by the window.localStorage object:

\n
if ('localStorage' in window) {\n  localStorage.setItem('theme', 'dark');\n}
\n

If the data you are going to save is not a string, you have to serialize it before saving it:

\n
const serializedData = JSON.stringify(myData);\nlocalStorage.setItem('data', serializedData);
\n

Retrieving Data

\n

To retrieve data, call the getItem(key) method exposed by window.localStorage:

\n
let savedTheme;\n\nif ('localStorage' in window) {\n  savedTheme = localStorage.getItem('theme');\n}
\n

Following the previous code snippet, savedTheme should hold the value \"dark\".

\n

Again, if the value you stored was not originally a string, you have to deserialize it:

\n
const serializedData = localStorage.getItem('data');\nconst myData = JSON.parse(serializedData);
\n

Cons of LocalStorage

\n

As we have seen, the LocalStorage API is very simple, but a few non-negligible drawbacks are present:

\n\n

The only asynchronous alternative to LocalStorage currently available is IndexedDB, which is definitely not known for its ease of use.

\n

The KV Storage Proposal

\n

Key-Value Storage is a proposal made by the Web Incubator Community Group (WICG) that aims to address the drawbacks of LocalStorage we have just mentioned. The specification mandates that it gets implemented by browser vendors as a built-in module and that it uses IndexedDB as its backing store.

\n

Let’s see an example usage of the KV Storage API, as provided by the specification:

\n
import { storage } from 'std:kv-storage';\n\n(async () => {\n  await storage.set('mycat', 'Tom');\n  console.assert((await storage.get('mycat')) === 'Tom');\n\n  for await (const [key, value] of storage.entries()) {\n    console.log(key, value);\n  }\n\n  await storage.delete('mycat');\n  console.assert((await storage.get('mycat')) === undefined);\n})();
\n

As we can see, set and get APIs are the equivalent for LocalStorage’s setItem and getItem, but they are asynchronous. This means that the main JS thread is not blocked while the data is being fetched or persisted 😄

\n

Try KV Storage Today

\n

If you are curious to experiment today with KV Storage, you have two possibilities:

\n\n

As you guess, the only web engine currently supporting KV Storage is Chromium from version 74. All web browsers based on Chromium v74+ (such as Google Chrome, Opera and Edge Dev) inherits this feature.

","fields":{"slug":"/you-will-stop-using-localstorage/"},"frontmatter":{"title":"You Will Stop Using LocalStorage","date":"April 25, 2019","published_time":"2019-04-25","description":"Goodbye LocalStorage, welcome Key-Value Storage!","tags":["javascript","js","storage","localstorage","local storage","kv storage","key-value storage","key-value","key","value","kv","google","chrome","wicg"],"cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQCAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABofzmoVIi/wD/xAAbEAABBAMAAAAAAAAAAAAAAAABAAIREgMhQv/aAAgBAQABBQLt8p7NkQMhsjZf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGhAAAgIDAAAAAAAAAAAAAAAAAAERMSEyYf/aAAgBAQAGPwKFgUX0tidsRsf/xAAcEAADAAIDAQAAAAAAAAAAAAAAARExYUFRobH/2gAIAQEAAT8hxVGYIkLoLI25tdzktLoWX4YvpbP/2gAMAwEAAgADAAAAELwv/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAEDAQE/EEx//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAQADAQEAAAAAAAAAAAAAAREAITFhQf/aAAgBAQABPxDaT8CPcbgpqiHsO9xtn4Vjo0Gg1lhIFXm8UNCcVJlbpEZuTb7n/9k=","aspectRatio":2.3333333333333335,"src":"/static/0f78175f44d00cc5c51d2fefa969f5f9/acf46/cover.jpg","srcSet":"/static/0f78175f44d00cc5c51d2fefa969f5f9/74a6a/cover.jpg 350w,\n/static/0f78175f44d00cc5c51d2fefa969f5f9/047db/cover.jpg 700w,\n/static/0f78175f44d00cc5c51d2fefa969f5f9/acf46/cover.jpg 1400w,\n/static/0f78175f44d00cc5c51d2fefa969f5f9/dcb90/cover.jpg 1600w","srcWebp":"/static/0f78175f44d00cc5c51d2fefa969f5f9/e6b98/cover.webp","srcSetWebp":"/static/0f78175f44d00cc5c51d2fefa969f5f9/e5785/cover.webp 350w,\n/static/0f78175f44d00cc5c51d2fefa969f5f9/1b440/cover.webp 700w,\n/static/0f78175f44d00cc5c51d2fefa969f5f9/e6b98/cover.webp 1400w,\n/static/0f78175f44d00cc5c51d2fefa969f5f9/702cd/cover.webp 1600w","sizes":"(max-width: 1400px) 100vw, 1400px","presentationWidth":1400,"originalImg":"/static/0f78175f44d00cc5c51d2fefa969f5f9/dcb90/cover.jpg"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/you-will-stop-using-localstorage/","previous":{"fields":{"slug":"/conditional-rendering-in-react/"},"frontmatter":{"title":"Conditional Rendering In React"}},"next":{"fields":{"slug":"/2019-08-22-gridsome/"},"frontmatter":{"title":"Introduction to Gridsome"}}}}}