{"id":285470,"date":"2019-04-01T14:07:40","date_gmt":"2019-04-01T21:07:40","guid":{"rendered":"http:\/\/css-tricks.com\/?p=285470"},"modified":"2019-04-01T14:07:40","modified_gmt":"2019-04-01T21:07:40","slug":"kv-storage","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/kv-storage\/","title":{"rendered":"KV Storage"},"content":{"rendered":"<p><code>localStorage<\/code> is&#8230;<\/p>\n<ul>\n<li>Good! It&#8217;s an incredibly easy API to use.<\/li>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">localStorage.setItem('name', 'Chris'); let name = localStorage.getItem('name');<\/code><\/pre>\n<li>Bad! Philip Walton explains why:<\/li>\n<\/ul>\n<blockquote><p><code>localStorage<\/code> is a synchronous API that blocks the main thread, and any time you access it you potentially prevent your page from being interactive.<\/p><\/blockquote>\n<p>Chrome has an idea (<a href=\"https:\/\/github.com\/WICG\/kv-storage\" rel=\"noopener\">here&#8217;s the proposal<\/a>) for reinventing it. <!--more--> Ultimately the API is even simpler:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import { storage } from 'std:kv-storage';\r\nstorage.set('name', 'Chris');\r\nstorage.get('name');<\/code><\/pre>\n<p>But! It&#8217;s async, so I can use <code>await<\/code> before I do those things without blocking anything. This demo will work in Chrome Canary right now:<\/p>\n<p class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"js,result\" data-user=\"chriscoyier\" data-slug-hash=\"eXadrq\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;\" data-pen-title=\"eXadrq\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/eXadrq\/\" rel=\"noopener\"><br \/>\n  eXadrq<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p>What in all heck is up with this line?<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import { storage } from 'std:kv-storage';<\/code><\/pre>\n<p>They are calling it a &#8220;built-in module.&#8221; In other words, something you can import but it makes no network request because it&#8217;s built into the browser. Pretty interesting approach.<\/p>\n<p>Philip continues:<\/p>\n<blockquote><p>Not exposing built-in modules globally has a lot of advantages: they won&#8217;t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker), and they won&#8217;t consume any memory or CPU unless they&#8217;re actually imported. Furthermore, they don&#8217;t run the risk of naming collisions with other variables defined in your code.<\/p><\/blockquote>\n<p>This is built on top of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/IndexedDB_API\" rel=\"noopener\">indexedDB<\/a>, so if you&#8217;re playing with it and need to clear the values or whatever, you do it there (<kbd><kbd><samp>DevTools<\/samp><\/kbd> > <kbd><samp>Application<\/samp><\/kbd> > <kbd><samp>Storage<\/samp><\/kbd> > <kbd><samp>IndexedDB<\/samp><\/kbd><\/kbd>). It&#8217;ll be fascinating to see if this catches on and whether new JavaScript features are shipped as built-in modules. I have no sense of whether other browsers think this is a good idea or not.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>localStorage is&#8230; Good! It&#8217;s an incredibly easy API to use. localStorage.setItem(&#8216;name&#8217;, &#8216;Chris&#8217;); let name = localStorage.getItem(&#8216;name&#8217;); Bad! Philip Walton explains why: localStorage is a synchronous API that blocks the main thread, and any time you access it you potentially prevent your page from being interactive. Chrome has an idea (here&#8217;s the proposal) for reinventing it.<\/p>\n","protected":false},"author":3,"featured_media":285558,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"KV Storage","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[760,1359,974,1094],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/kv-storage-devtools-source.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":323456,"url":"https:\/\/css-tricks.com\/a-primer-on-the-different-types-of-browser-storage\/","url_meta":{"origin":285470,"position":0},"title":"A Primer on the Different Types of Browser Storage","date":"October 21, 2020","format":false,"excerpt":"In back-end development, storage is a common part of the job. Application data is stored in databases, files in object storage, transient data in caches\u2026 there are seemingly endless possibilities for storing any sort of data. But data storage isn\u2019t limited only to the back end. The front end (the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/kv-storage-devtools-source.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":13392,"url":"https:\/\/css-tricks.com\/localstorage-examples\/","url_meta":{"origin":285470,"position":1},"title":"Examples of Sites where localStorage should or is being used","date":"July 27, 2011","format":false,"excerpt":"localStorage is a new JavaScript API in HTML5 that allows us to save data in key\/value pairs in a user's browser. It's a little bit like cookies except: Cookies expire and get cleared a lot, localStorage is forever (until explicitly cleared). localStorage isn't sent along in HTTP Requests, you have\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/07\/login.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":287644,"url":"https:\/\/css-tricks.com\/the-browser-can-remember-edited-content\/","url_meta":{"origin":285470,"position":2},"title":"The Browser Can Remember Edited Content","date":"May 22, 2019","format":false,"excerpt":"You can make the text inside any HTML element editable by adding the contenteditable attribute. Hey, I'm like a textarea kinda now! I wouldn't say there are wheelbarrows full of use-cases for that, but it's neat. One possible use might be an in-progress design in which editing the content from\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/elephant-browser.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":298737,"url":"https:\/\/css-tricks.com\/scrapestack-an-api-for-scraping-sites\/","url_meta":{"origin":285470,"position":3},"title":"scrapestack: An API for Scraping Sites","date":"November 12, 2019","format":false,"excerpt":"Not every site has an API to access data from it. Most don't, in fact. If you need to pull that data, one approach is to \"scrape\" it. That is, load the page in web browser (that you automate), find what you are looking for in the DOM, and take\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249138,"url":"https:\/\/css-tricks.com\/overview-client-side-storage\/","url_meta":{"origin":285470,"position":4},"title":"An Overview of Client-Side Storage","date":"December 19, 2016","format":false,"excerpt":"Ire Aderinokun: There are currently four active methods for storing data on the client side. Cookies (old school, still useful because they are sent with server requests) Local Storage (very easy to use) Session Storage (exactly the same, only clears when the tab is closed) IndexedDB (quite complex, quite powerful)","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":260401,"url":"https:\/\/css-tricks.com\/importance-javascript-abstractions-working-remote-data\/","url_meta":{"origin":285470,"position":5},"title":"The Importance Of JavaScript Abstractions When Working With Remote Data","date":"September 22, 2017","format":false,"excerpt":"Recently I had the experience of reviewing a project and assessing its scalability and maintainability. There were a few bad practices here and there, a few strange pieces of code with lack of meaningful comments. Nothing uncommon for a relatively big (legacy) codebase, right? However, there is something that I\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/kv-storage-devtools-source.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285470"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=285470"}],"version-history":[{"count":13,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285470\/revisions"}],"predecessor-version":[{"id":285556,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285470\/revisions\/285556"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/285558"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=285470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=285470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=285470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}