HTML5 – Local Storage

The HTML5 Web Storage API makes it possible to store data locally, and can store 5M of data, which can be used by a domain at will. Note that it is a domain, which means that the saved data cannot be accessed across domains.

I always like to learn new knowledge in practice, and today is no exception. I used localStorage to make a small note application, and the data is stored in the browser.

How about it, not bad, right? Let's use this example development process to introduce localStorage!

Getting Started

I won’t paste the HTML and CSS code here. If you want to run this example locally, I will provide the source code download link at the end of the article.

First of all, I would like to talk about how to create such a note. The specific process should be as follows.

1. Get user input
2. Get the level of the note, which is selected in <select>.
3. Save the content and rating in an object and convert it to a string using JSON.
4. Generate a key to save data. For easy search, create an array to store the key separately. Of course, this array is also converted into a string using JSON.
5. Use the setItem() method of localStorage to save the note object and the key array string.
6. Adds a tag to the DOM structure.

According to the above process, you can write the following code

 function createNote() {
    var noteElement = document.getElementById( "note" );
    var noteValue = noteElement.value;
 noteElement.value = "" ; 
 
    var levelObj = document.getElementById( "note-level" );
    var index = levelObj.selectedIndex;
    var level = levelObj[ index ].value; 
 
 var noteObj = {
 "value" : noteValue,
 "level" : level  
 } 
 
 var date = new Date ();
    var key = "note_" + date .getTime();
    localStorage.setItem( key , JSON.stringify(noteObj)); 
 
    var notesArray = getNotesArray();
 notesArray.push( key );
    localStorage.setItem( "notesArray" , JSON.stringify(notesArray)); 
 
    addNoteToDOM( key , noteObj);
 }

It is worth noting that localStorage can only save string values, so we have to use JSON to convert it to a string here. You can use the following code to store an integer or floating point number.

 localStorage.setItem( "my_num" ,10);

This line of code does work, that's because JS automatically converts it to a string, so if you want to get an integer out, you have to convert it, like this.

 var num = parseInt(localStorage.getItem( "my_num" ));

In the above code, two custom functions are used, namely getNotesArray() and addNoteToDOM(). Their functions can be easily identified by their names. However, it is puzzling why we need to use an array to store keys?

There is one thing you need to know. In a real website, you can't just store notes, right? You also need to store a lot of other data. If you save a lot of other data, then finding notes is a very time-consuming task. Why should I look for notes?

What if your user closes the browser and then reopens the website? At this time, we have to find the notes. Okay, let's take a look at the getNotesArray() function.

 function getNotesArray() {
    var notesArray = localStorage.getItem( "notesArray" ); 
 
 if (!notesArray) {
 notesArray = [];
        localStorage.setItem( "notesArray" , JSON.stringify(notesArray));
 } else {
        notesArray = JSON.parse(notesArray);
 } 
 
 return notesArray;
 }

Use localStorage.getItem() to get the array. If the array does not exist, create one and then convert it into a string and save it. If the array already exists, convert it from a string to an array. In short, an array should be returned for us to use.

Okay, now you know what we are talking about. Next is the addNoteToDOM() function. This function is even simpler. Let’s take a look at it.

 function addNoteToDOM( key , noteObj) {
    var notes = document.getElementById( "note-list" );
    var note = document.createElement( "li" );
    note.setAttribute( "id" , key );
    note.onclick = deleteNote; 
 
    var value = noteObj.value;
 note.innerHTML = value; 
 
    var level = noteObj.level ;
    note.setAttribute( "class" , level );
 notes.appendChild(note);
 }

First of all, we need to explain that #note-list is a <ul> element, and our notes are also composed of its child elements <li>. The rest is simple. We assign values ​​to <li>, and then add different background colors to it according to the level of the tag. This is achieved by setting a class for it.

It is worth noting that here we pass the key as a parameter, and use the key value to set the id attribute for <li>. This is to achieve the purpose of deletion. After all, we can't just create a tag without knowing how to delete it, so here we also set a click event for <li>.

 function deleteNote(e) {
 var key = e.target.id;
    localStorage.removeItem( key );
    var notesArray = getNotesArray(); 
 
 for (var i = 0; i < notesArray.length; i++) {
        if ( key === notesArray[i]) {
            notesArray.splice(i, 1);
 }
 }
    localStorage.setItem( "notesArray" , JSON.stringify(notesArray)); 
 
 deleteNoteFromDOM( key );
 }

When the <li> element is clicked, an event object will be passed in. Through target, we can get the object that triggered the event. We get the id of this object and delete it from the DOM.

But this is not the point. Deleting a tag means that we also need to delete its value from the local storage and remove it from the key array. We use removeItem and splice() to achieve this goal.

expand

We have explained the use of localStorage above, and the code above contains the core code of the note application. It is worth mentioning that there is also a sessionStorage, which is used exactly the same as localStorage, the only difference is that once the browser window is closed, all the saved data will be deleted.

Of course, this is an attribute in HTML5, so we need to detect it when using it. You can use the following code to detect whether the browser supports localStorage.

 if (window[ "localStorage" ]) {
 // your logic code
 }