All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Use Local Storage In JavaScript

Last Updated : Mar 11, 2024

How To Use Local Storage In JavaScript

In this tutorial we will show you the solution of how to use local storage in JavaScript, as we know local storage means we can store some data on web browser that will only belongs to javascript site or apps and also it had no expire date event window close it will not erased.

Here we collecting vehicle details like ‘brand, price, index number’ then we converting them as json data and stored on web browser and we can retrieve them by using index number.

Step By Steps Guide On How To Use Local Storage In JavaScript :-

Here we created form with four input fields for collect details of ‘vehicle, brand, price, index number’ and a button ‘Store Records’ created with onclick event with function call ‘store()’ as value for loads it when user clicks on it.

Another input tag defined for retrieve stored json data by index number and button ‘Retrieve Record’ will initialize function retrieveRecords() call for showing retrieved result on webpage.

Those declared methods defined in external storage.js script file. There we using setItem(), getItem() methods for doing store and retrieve like process interaction with local storage.

<!DOCTYPE html>
<html>
    <head>
        <title>LOCAL STORAGE USE</title>
        <script src="storage.js"></script>
    </head>
    <body>
        <form>
            <input type="text" id="vhcl" placeholder="Vehicle" autofocus><br>
            <input type="text" id="brand" placeholder="Brand" autofocus><br>
            <input type="text" id="price" placeholder="Price" autofocus><br>
            <input type="text" id="indx" placeholder="Index Number" autofocus><br>
            <button onclick="store()">Store Records</button><br><br>
            <div>
                <input type="text" id="retrieveKey" placeholder="Retrieve Index Number">
                <br>
                <button onclick="retrieveRecord()">Retrieve Record</button>
            </div>
        </form>
    </body>
</html>
Storage.js
function store(){
    var v=document.getElementById('vhcl').value;
    var b=document.getElementById('brand').value;
    var p=document.getElementById('price').value;
    var x=document.getElementById('indx').value;
    const arr={
        vehicle:v,
        brand:b,
        price:p,
    }
    window.localStorage.setItem(x,JSON.stringify(arr));
    document.write("Record Stored Successfully");
}
function retrieveRecord(){
    var key=document.getElementById('retrieveKey').value;
    var rec=window.localStorage.getItem(key);
    document.write("Retrieved records<br><br>"+rec);
}
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Here we defined form with four input fields with attribute ‘id’ with different values ‘vhcl, brand, price, indx’ for collect vehicle type, vehicle brand, vehicle price, vehicle reference number like key from user.
  7. Button ‘Store Records’ defined for submit user inputs on web browser’s local storage done by ‘store()’ method defined at external script file ‘storage.js’.
  8. Another input tag with id ‘retrieveKey’ defined for collect index number of needs to retrieving json data and button ‘Retrieve Record’ defined for get user json data belongs to specified index number in web browser’s local storage done by ‘retrieveRecord()’ method.
  9. In script we defined store() method, here we storing ‘vehicle,brand,price,index number’ collected inputs from user on respective variables ‘v,b,p,x’.
  10. We declared array ‘arr’ with keys ‘vehicle,brand,price’ and values refers as dynamic values based on users.
  11. The window.localStorage.setItem() line refers we sets user input values on local storage of window and there we converting them as json data by JSON.stringify() method then we printed message ‘Record Stored Successfully’ on webpage.
  12. In retrieveRecord() method we storing ‘retrieveKey’ element value to variable ‘key’ then using getItem() method we collecting ‘key’ value belongs json data from web browsers local storage and stored on variable ‘rec’.
  13. Finally we printed message ‘Retrieved records’ with retrieved json data of result on webpage. If they provide some other index number from local storage then result will empty.
  14. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to use local storage in javascript.

When we executes program on browser we can see four input fields ‘Vehicle, Brand, Price, Index Number’ there user needs to fill them and when clicks on ‘Store Records’ message ‘Record Stored Successfully’ will displayed.

For retrieve stored data user needs to give index number as input on ‘Retrieve Index Number’ input fields then when user clicks ‘Retrieve Record’ button result of json data will displayed with ‘Retrieved records’ message.

I hope this tutorial on how to use local storage in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Ashish

Ashish is a dynamic and motivated individual with a passion of programming and an experienced programmer having 3+ years of experience in various languages like Java, Python, HTML, CSS, JavaScript, jQuery and various frameworks like Bootstrap

Follow Ashish On Linkedin 🡪