What is localStorage?
Published: 2020-09-26 18:08:32

Full article can be found <a href="https://taslangraham.com/2020/09/26/mastering-localstorage/" target="_blank">here</a>.

<!-- wp:paragraph -->
<p>LocalStorage is a web storage which allows you to store and access data as key:value pairs inside a Web Browser using JavaScript.  Data stored with localStorage is permanent and stays forever unless deleted manually or programmatically&nbsp;.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this article we will look at the five (5) methods available when using local storage, the benefits of localStorage and things to consider when using it.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Methods</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As mentioned above, you have five (5) methods available when working with localStorage. These are:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><em><strong>setItem()</strong></em> - saves a key:value pair to localStorage</li><li><strong><em>getItem()</em></strong> - retrieve an item in localStorage via a key</li><li><em><strong>removeItem() </strong></em>- deletes the item for the given key</li><li><strong><em>clear()</em></strong> - deletes all items</li><li><em><strong>key()</strong></em> - returns the key at the given index</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Before we look at each method, it is important to understand that the localStorage operated on will be the current domain from which the methods are executed.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h4><strong>setItem(<em>key, value</em>)</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You use  the <strong>setItem</strong> method to store new data inside localStorage. It accepts a <em>key </em>and a <em>value. </em></p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">localStorage.setItem('school', 'University of Technology, Jamaica');</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The above code will create a key named <strong><em>school</em> </strong>and store it with the value <strong><em>university of Technology, Jamaica</em></strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":6} -->
<h5>Storing Objects in localStorage</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It's important to note that localStorage can only store string values. If we want to store an object, we have to first convert it to a string value. We do so using the JSON.stringify() method.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">// Create user object

let user = {
  name: 'Taslan Graham',
  nationality: 'Jamaican'
};

localStorage.setItem('user', JSON.stringify(user)); // Stores user as JSON string
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">The above will convert the <code> user</code> object to <code>"{"name":"Taslan Graham","nationality":"Jamaican"}"</code> and store it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h4><strong>getItem(<em>key</em>)</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The getItem() method accepts a key and returns its value.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">localStorage.getItem('school');</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This will return <code>'University of Technology, Jamaica'</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We can also retrieve the <strong>user</strong> item stored earlier.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">let user = localStorage.getItem('user');</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">This returns <code>"{"name":"Taslan Graham","nationality":"Jamaican"}"</code>. We can convert this JSON string value back into a JavaScript object.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">JSON.parse(user); // {name: "Taslan Graham", nationality: "Jamaican"}
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h4><strong>removeItem(<em>key</em>)</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <strong>removeItem </strong>method accepts a key and deletes it from localStorage, if it exists.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">localStorage.removeItem('school');</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":5} -->
<h4><strong>clear()</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <strong>clear</strong> method will delete all data inside localStorage for the domain.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">localStorage.clear();</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h4><strong>key()</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <strong>key</strong> method accepts a number(<em>n) </em>and returns the <em>nth</em> key inside in the localStorage object;  </p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">localStorage.key(0)</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The above code would return the first key inside localStorage.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <strong>key</strong> method can be useful when we want to access each key inside localStorage without knowing their names.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">for(const i = 0; i &lt; localStorage.length; i++){
  const key = localStorage.key(i);
  console.log(localStorage.getItem(key);
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the above code, we start looping at zero and for each iteration we use the value of  <strong>i </strong>to retrieve the key at that position inside localStorage; we store the key inside the <strong>key</strong> variable. We then log the value of the current key to the console.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Benefits of localStorage</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>localStorage provides some very interesting benefits. These includes:</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":6} -->
<h4><strong>1. localStorage is supported by the major modern browsers. </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This means you can use it within your app without worries.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> But, if you want to ensure that the user's browser supports localStorage, you can do the following.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","lineNumbers":false} -->
<pre class="wp-block-syntaxhighlighter-code">if (typeof(Storage) !== "undefined") {
    // Write code for localStorage here
    } else {
     // No localStorage support
    // Do something else
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":6} -->
<h4><strong>2. Can be used for simple caching</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Most browsers provides up to 10MB for web storage. This means you could use localStorage for caching data which rarely changes and is accessed often throughout your application.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":6} -->
<h4><strong>3. The data can be accessed easily and quickly</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can retrieve data without making a network call.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Things to consider</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When using localStorage there a couple of things to take into consider. Well, they are more like thing <strong>not to do</strong> when using localStorage.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":6} -->
<h4><strong>1. Don't store sensitive data in localStorage</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There's no security associated with localStorage. Anyone can view the data. Therefore , it is not suitable for storing sensitive information such as user passwords.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":6} -->
<h4><strong>2. You may still need an actual database</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The data stored is localized to the user's browser and is only accessible there. Therefore localStorage is not a substitute for a database. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this article we covered localStorage, and the methods available when working with it. Additionally, we looked at some benefits of localStorage as well as some things to take into consideration when using localStorage.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you enjoy this article, leave a comment about what was most valuable to you. Also share with friends who might find it useful.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Until next time, <em>Think, Learn, Create, Repeat!</em></p>
<!-- /wp:paragraph -->