Keep array input value from localstorage on page refresh

  • 13-12-2022
  • 687
  • Jquery
  • Haresh Chauhan

How to Keep array input value from local storage on page refresh; if you want to know, How to save user inputs array value after refreshing the page using localstorage. This post will help you to save the same name input field or array input field value on how to storage in local storage using js and after reloading or refreshing the page how to get that appended value in the input field that was entered before refresh keeps same.

This example helps you with an array input field, array input field store, and fetch append a little bit more difficult than the other one, so I am just an example for you to fix your problem with the help of this post.

This is my input price_1 field, This is a multiple price field that's why I took this field as price_1[] array so I can get a multiple entered value form the input field.

So once the client enters the price value and refreshes the page it's entered value price is gone it's self which does not look good. So using js local storage fixes the issue.

When the price is entered in the input field, on the change we will store that input price value in the local storage. After that, if any user refreshes the page the price value of the input field will append itself from the local storage javascript, the code below gives how to get value on the change and how to append value back from the storage to input itself after the page refresh.

Array Input's

<input type="number" class="form-control" name="price_1[]" step="0.01">
<input type="number" class="form-control" name="price_1[]" step="0.01">
<input type="number" class="form-control" name="price_1[]" step="0.01">
<input type="number" class="form-control" name="price_1[]" step="0.01">
<input type="number" class="form-control" name="price_1[]" step="0.01">

In my case, I want to store each input field price name column in the local storage, so when I refresh the browser page it could not erase data. After refreshing the page the appended local storage data automatically will restore itself from the script to the input field.

Store & Retrive

<script>
// ON CHANGE APPEND INTO LOCALSTORAGE
$('input[name="price_1[]"]').change(function (e) { 
    var price_1 = $('input[name="price_1[]"]').map(function () {
        return this.value;
    }).get();

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

// AFTER PAGE REFRESH WILL APPEND BACK TO INPUTFIELD BASE ON KEY NAME
$.each(JSON.parse(localStorage.getItem('price_1[]')), function (key, item) { 
    $('input[name="price_1[]"]').eq(key).val(item);
});
</script>

Clear Storage

If you wish to destroy your local storage or want to clear use localStorage.clear() script before store into the local storage.

<script>
    localStorage.clear();
</script>

We always thanks to you for reading our blogs.


dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)


We Are Also Recommending You :