How can I save user input to local storage?

Question

I've made a day planner and realised I never set the input up to save to local storage. I'm not very familiar with saving to local storage and quite frankly don't know where to start, and the examples I'm seeing online are very different from the format of my code so they're hard to follow. Any tips?

$(function(){
    $(document).on('click','.edit_btn' , function(){
        let editable = $(this).prev('.edit_cont').attr('contenteditable');
        if(editable){
            $(this).text('edit');
            $(this).prev('.edit_cont').removeAttr('contenteditable');
            $(this).prev('.edit_cont').removeClass('edit_cont_border');
         }
          else{
            $(this).text('save');
            $(this).prev('.edit_cont').attr('contenteditable','true');
            $(this).prev('.edit_cont').addClass('edit_cont_border');
        }
    })
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container" spellcheck="false">
    <div class = "row my-row">
        <div class = "col my-col col-a1 colorcode" id = "9"> 9am </div>
        <div class = "col my-col col-a2 edit_cont" > </div>
        <div class = "col my-col col-a3 edit_btn"> edit </div>
    </div>
    <div class = "row my-row" >
        <div class = "col my-col col-b1 colorcode" id = "10"> 10am </div>
        <div class = "col my-col col-b2 edit_cont">  </div>
        <div class = "col my-col col-b3 edit_btn"> edit </div>
    </div> (+6 more rows)

Are you looking for indexed db? https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB — Vijay Palaskar, Jul 16 '20 at 05:27
You also save data into the browser Cookie. It's easy and optimistic. — Omar, Jul 16 '20 at 06:27
Indexed db more flexible & to explore than cookies & local storage for large data & Structured storage — Vijay Palaskar, Jul 16 '20 at 06:31

Starx · Accepted Answer · 2020-07-16T06:05:18.117

2

Quite simple to use localStorage. All you have do is, for example:

localStorage.setItem('your_data_key', yourData);

You can choose if you want to store single input's data in a local storage item or the entire form.

If you want to use single item to store data of entire form, one way is to convert the form's data into JSON. Since you are using jQuery, check the answers in: Convert form data to JavaScript object with jQuery It has an answer for doing it in vanilla JS as well.

Object.fromEntries(new FormData(form))

You can use combination of event listeners to save and load data to and from localstorage.

In jQuery, one way would be something like the following.

$(function() {
    // storedData = localStorage.getItem('your_data_key');
    // Load the stored Data to the form based on the way you have saved it
});

function storeData(e) {
    // yourData = ...; // Collect the data how you want
    // localStorage.setItem('your_data_key', yourData);
}

$("form").on('submit', storeData);
$("form :input").on('change', storeData);

_{The above is incomplete, untested and for guidance purpose only.}

edited Jul 16 '20 at 06:05

answered Jul 16 '20 at 05:14

Starx

77,474
47
185
261

1

how can i make a data key out of the userinput? – Aiya Siddig Jul 16 '20 at 05:14
It's not quite this simple. You need to convert the data to JSON. – Barmar Jul 16 '20 at 05:15
@AiyaSiddig Use the input name. – Starx Jul 16 '20 at 05:17
@Barmar, Why do I need to convert the data to json? – Starx Jul 16 '20 at 05:17
@AiyaSiddig You can use the date and time of the event as the key. – Barmar Jul 16 '20 at 05:17
@Starx I was thinking that all the data would be stored in a big object in a single local storage item. But you're right, you can just store each input separately. – Barmar Jul 16 '20 at 05:18
@Barmar Of course. I answered that way because I don't know what the OP is planning to implement :D – Starx Jul 16 '20 at 05:20
I'm not following. Essentially I would like like that once the user hits "save" their edit is saved and if they edit it or delete it its replaced/removed from local storage. so that when they refresh its still on the page. – Aiya Siddig Jul 16 '20 at 05:34
1

@AiyaSiddig Do you know how to use event handlers? `once the user hits "save"` part can be done by executing code on the `click` event. `edit is saved` can be handled by `change` event` and `when they refresh its still on the page` is done by `ready` and `load` event. – Starx Jul 16 '20 at 05:46

How can I save user input to local storage?

1 Answers1