/ programming

Local Storage Stuff!

I used to hear a lot about this term but personally never used it. So, one good day I decided to make an app where I can pen down my random thoughts which used to come often during my work. I did not want to use other third party apps because I did not like UI and also had not used html/css/vanilla js since a long time. These all seem to be a perfect setting to go for it!

What is Web Storage?

  • It is an HTML5 feature that allows to store data locally in browsers.
  • Before HTML5, application data had to be stored in cookies, included in every server request.
  • Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
  • Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
  • It could be either:
    • sessionStorage : data lasts for a session (data is lost when browaser tab is closed)
    • localStorage: data has no expiry date


It is an object basically. It stores the data in the form of strings. The benefit as told is that data will remain available even if you close your browser.

Storing data

localStorage.setItem("counter",0) //counter=0
localStorage.counter = 1          //counter=1

Retrieving data

localStorage.getItem("counter") //0:if counter=0
localStorage.counter         //0:if counter=0

Deleting data


What if to store array as a data item in localStorage ?

I mentioned prior that localStorage stores data as strings, so we need to stringify it while storing and parse to manipulate it.


var names = ["afreen"];
localStorage.setItem("names",JSON.stringify(names)); // ["afreen"]

var n = JSON.parse(localStorage.names);
localStorage.setItem("names",JSON.stringify(n)); //["afreen","elly"]

My simple app relying on localStorage


1. Setting up basic HTML/CSS

Please dont judge my css and design skills :P

2. That vanilla js snippets !

Whats happening?

  1. Click Done Button
  2. Save the entered journal in the list of journals in local storage
  3. Showing the list of journals with local storage
    • Create a new paragraph element
    • Fill the paragraph element with the journal text
    • Append the newly created paragraph element to an existing div as a child.

1. Click Done Button

<button type="button" onclick="save()"class="form-btn">Done</button>

2. Save the entered journal in the list of journals in local storage
Firstly initializing our journal array in local storage. Since it is an array and localStorage accepts only strings we need to stringinfy it.


Now pushing the journal entered as:

var j = JSON.parse(localStorage.journal);
var text = document.getElementById('jrnl');

3. Showing the list of journals with local storage


var div = document.getElementsByClassName('box-2')[0];
var j = JSON.parse(localStorage.journal);
j.forEach(element => {
    var para = document.createElement('p');//create new paragraph element
    var t=document.createTextNode(element);//creating a text node 
    para.appendChild(t);                  //appending text node to paragraph
    div.appendChild(para);                //appending it to the container div

The full code is available here

Good to read:

Afreen Rahman

final year computer science student who loves to talk about tech, plays Pacman and minesweeper, and currently building a COOL compiler!!

Read More