/ 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

localStorage

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
                OR
localStorage.counter = 1          //counter=1

Retrieving data

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

Deleting data

localStorage.removeItem("counter",0) 

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.

Example

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

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

My simple app relying on localStorage

Screenshot_2019-01-14-Journal-page-2-

1. Setting up basic HTML/CSS

Please dont judge my css and design skills :P
Screenshot_2019-01-14-Journal-page

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.

localStorage.setItem("journal",JSON.stringify([]));

Now pushing the journal entered as:

var j = JSON.parse(localStorage.journal);
var text = document.getElementById('jrnl');
j.push(text.value);
text.value="";
localStorage.setItem("journal",JSON.stringify(j));

3. Showing the list of journals with local storage

Screenshot_2019-01-14-Journal-page-1-

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