How To Implement A Database Using Html5 Web Storage

In the previous article, we learned how to use Html5 sessionStorage & localStorage object to manipulate client-side data in javascript. In this article, I will show you examples of how to implement a client-side web database using the localStorage object.

1. How To Use Html5 localStorage Object To Implement Client Side Database Function Examples.

The example demo video URL is https://youtu.be/XLKA_gD7v78.

The upper side of the example page is the place where you can input the user name, email, phone, and note information.
After you input, you can click the Save User Info button to save the user data, and it will show all the user info data list below the button section.
The added user info data is saved in the Html5 localStorage object with the user name as the key.

You can input and save multiple user info data in the localStorage object, but if two users have the same name (case sensitive), then the last one will override the first one, so the user name should be unique.
There is a search box below the user info input area. You can input the user name in the search box, when you click the Search button, it will list the user info list below the search box.
If you do not input any search keyword, it will list all the user info data below the search box.

If you click the Clear Local Storage button next to the Search button, it will clear all the data that are saved in the localStorage object.
This example contains 2 source files, html5-web-sql-database-example.html, html5-web-sql-database-example.js.

html5-web-sql-database-example.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Html5 Local Storage Vs Session Storage With Example</title>
<script type="text/javascript" src="html5-web-sql-database-example.js" charset="utf-8"></script>
<style>
.block-class{
    display:block;
    margin-top:10px;
}

.label-class{
    width: 50px;
    display: inline-block;
    text-align: right;
    vertical-align: top;
}
</style>
</head>
<body>
<h3>Implement Html5 Web Database Using Web Storage Example.</h3>
<div class="block-class">
    <div class="block-class">
        <label class="label-class">
            Name:
        </label>
        <input type="text" id="userName" placeholder="Input customer name." />
    </div>

    <div class="block-class">
        <label class="label-class">
            Email:
        </label>
        <input type="text" id="userEmail" placeholder="Input customer email." />
    </div>    

    <div class="block-class">
        <label class="label-class">
            Phone:
        </label>
        <input type="text" id="userPhone" placeholder="Input customer phone." />
    </div>

    <div class="block-class">
        <label class="label-class">
            Note:
        </label>
        <textarea id="userNote" placeholder="Input customer note."></textarea>
    </div>

    <div class="block-class">
        <label class="label-class">
            
        </label>
        <input type="button" id="saveUserInfoBtn" value="Save User Info" onclick="saveUserInfo('userName', 'userEmail', 'userPhone', 'userNote')" />
    </div>
</div>
<hr>
<div class="block-class">
    <input type="text" id="searchByNameKeyword" placeholder="Input the user name to search." size="30" />
    <input type="button" id="searchByNameBtn" value="Search" onclick="search('searchByNameKeyword')" />
    <input type="button" id="clearLocalStorageBtn" value="Clear Local Storage" onclick="clearLocalStorage()" />
</div>
<output id="outputUsersList" style="display:block;margin-top: 10px;"></output>
</body>
</html>

html5-web-sql-database-example.js.

function saveUserInfo(userNameId, userEmailId, userPhoneId, userNoteId){

    var userNameValue = '';
    var userEmailValue = '';
    var userPhoneValue = '';
    var userNoteValue = '';

    var userNameObject = document.getElementById(userNameId);
    if(userNameObject==null){
        alert('The user name input text box does not exist.');
        return;
    }else{
        userNameValue = userNameObject.value;
        if(userNameValue.trim().length == 0){
            alert('The user name can not be empty.');
            return;
        }
    }

    // first, it should check and verify whether the user name exist or not,
    // if the user name exist, then show an alert message to let user use another unique user name.
    // need to implement in later.

    var userEmailObject = document.getElementById(userEmailId);
    if(userEmailObject==null){
        alert('The user email input text box does not exist.');
        return;
    }else{
        userEmailValue = userEmailObject.value;
        if(userEmailValue.trim().length == 0){
            alert('The user email can not be empty.');
            return;
        }
    }

    var userPhoneObject = document.getElementById(userPhoneId);
    if(userPhoneObject==null){
        alert('The user phone input text box does not exist.');
        return;
    }else{
        userPhoneValue = userPhoneObject.value;
        if(userPhoneValue.trim().length == 0){
            alert('The user phone can not be empty.');
            return;
        }
    }

    var userNoteObject = document.getElementById(userNoteId);
    if(userNoteObject==null){
        alert('The user note input text area does not exist.');
        return;
    }else{
        userNoteValue = userNoteObject.value;
        if(userNoteValue.trim().length == 0){
            alert('The user note input text area can not be empty.');
            return;
        }
    }

    var userData = new Object;

    userData.userName = userNameValue;
    userData.userEmail = userEmailValue;
    userData.userPhone = userPhoneValue;
    userData.userNote = userNoteValue;

    // Convert the object to JSON string.
    var userDataString = JSON.stringify(userData);
    // Set the user info JSON string to localStorage object, use the user name as the key.
    localStorage.setItem(userData.userName, userDataString);
    alert('User info is saved to local web storage successfully.');

    searchByName('');

}

// need to implement the below function later.
function isUserExist(userName){

}


function search(searchByNameKeywordId){

    var searchByNameKeywordObject = document.getElementById(searchByNameKeywordId);
    if(searchByNameKeywordObject==null){
        alert('The search user by name keyword input text box does not exist.');
        return;
    }


    var searchByNameKeyword = '';

    searchByNameKeyword = searchByNameKeywordObject.value;

    searchByName(searchByNameKeyword);
}

function searchByName(searchByNameKeyword){

    // get and remove the user data list on the web page.
    var userDataList = document.getElementById('outputUsersList');
    userDataList.innerHTML = '';

    if(searchByNameKeyword.trim().length == 0){
        // show all user data on the web page.
        var len = localStorage.length;
        for(var i=0;i<len;i++){

            key = localStorage.key(i);
            var userDataJsonString = localStorage.getItem(key);
            listUserData(userDataJsonString);
        }

    }else{

        // show the special user data on the web page.
        var userDataJsonString = localStorage.getItem(searchByNameKeyword);
        listUserData(userDataJsonString);
    }
}


function listUserData(userDataJsonString){

    var userData = JSON.parse(userDataJsonString);

    var userDataList = document.getElementById('outputUsersList');

    var labelUserName = document.createElement('label');
    labelUserName.style.display = 'block';
    var labelUserNameText = document.createTextNode('Name:' + userData.userName);
    labelUserName.append(labelUserNameText);
    userDataList.append(labelUserName);


    var labelUserEmail = document.createElement('label');
    labelUserEmail.style.display = 'block';
    var labelUserEmailText = document.createTextNode('Email:' + userData.userEmail);
    labelUserEmail.append(labelUserEmailText);
    userDataList.append(labelUserEmail);

    
    var labelUserPhone = document.createElement('label');
    labelUserPhone.style.display = 'block';
    var labelUserPhoneText = document.createTextNode('Phone:' + userData.userPhone);
    labelUserPhone.append(labelUserPhoneText);
    userDataList.append(labelUserPhone);

    var labelUserNote = document.createElement('label');
    labelUserNote.style.display = 'block';
    var labelUserNoteText = document.createTextNode('Note:' + userData.userNote);
    labelUserNote.append(labelUserNoteText);
    userDataList.append(labelUserNote);

    var hr = document.createElement('hr');
    userDataList.append(hr);

}


function clearLocalStorage(){

    localStorage.clear();

}

1. How To Use Html5 localStorage Object To Implement Client Side Database Function Examples.

Leave a Comment Cancel Reply