How to save and store user input locally?

Question

I have made an HTML browser database for comic collecting, everything is working fine right now apart from I have added the options for those I have shared it with to tick (own? reprint? favourite?) to the selected comics page. But upon refreshing or leaving the page the ticked options disappear.

What I want is for it to save it locally as it's made only for that purpose and not online. Basically save it locally which will save the ticked user choices and also store them user choices so that in a planned (my collection) tab it will have all the ticked comics you own, have been reprinted, and/or favourite.

I have no knowledge of how to do this at all hence the reason I'm asking for help.

Code I have already in my HTML page:

            <form>
            <input type="checkbox" id="own" name="own" value="Own?">
            <label for="own">Own?</label>
            <input type="checkbox" id="reprint" name="reprint" value="Reprint?">
            <label for="reprint">Reprint?</label>
            <input type="checkbox" id="favorite" name="favorite" value="Favorite">
            <label for="favorite">Favorite</label>
        </form>

You're looking for `localStorage`. Read that answet: https://stackoverflow.com/a/4778046/863110 — Mosh Feu, Jun 07 '19 at 13:59
You should use [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) or [Cookies](https://developer.mozilla.org/docs/Web/API/Document/cookie) with Javascript — toto1911, Jun 07 '19 at 14:00
@MoshFeu - thank you for that, but... I am very new to this! so I would like to see some examples rather than just lines and lines of text which make no sense to a beginner :( — DarkXess, Jun 07 '19 at 14:36
There are a lot of resources about those topics. That's why I commented and not an answer. Requests for tutorials are off-topic here, so just mention the name of the technologies should be enough for you to start to explore. — Mosh Feu, Jun 07 '19 at 15:35

MaKR · Answer 1 · 2019-06-07T15:04:28.997

0

https://www.w3schools.com/jsref/prop_win_localstorage.asp

I would do something like this:

// accepts single representation of comic
function addFavorite(favorite) {
    // full list of favorited comics
    var favorites = localStorage.getItem("favorites");

    // add new favorite to list
    favorites.push(favorite);

    // store the list in localStorage again (remove it first)
    localStorage.removeItem("favorites");
    localStorage.setItem("favorites", favorites);
}

You may want this in an event instead of a named function, and that way you could use html data attributes instead of passing the variable into the function, etc.

[EDIT - see comments]

// accepts single representation of comic with key
// where key is favorite/own/reprint and is expandable
function addStorage(key, value) {
    // full list of comics by key
    var list = localStorage.getItem(key);

    // add new favorite to list
    list.push(value);

    // store the list in localStorage again (remove it first)
    localStorage.removeItem(list);
    localStorage.setItem(key, list);
}

You'll still need to attach it to a click or other event. You can try

<img src="favorite_star.png" onClick="addStorage('favorites', 'Superman 3')">

edited Jun 07 '19 at 15:04

answered Jun 07 '19 at 14:46

MaKR

1,882
2
17
29

Hey MaKR thank you for the reply, this would go on the HTML page I am wanting it to work on right? or the CSS? as of right now every comic has its own HTML page which I made using a template. Also as far as I can see this only works for (favorites) right? I would have to do this 3 times totally for (Own?) and (Reprint?) Correct or? and sorry, I am new to this part of coding :) – DarkXess Jun 07 '19 at 14:49
This would be JavaScript using the tag. You can paste that between or you can use – MaKR Jun 07 '19 at 14:58
Added the part of the code for the tick boxes in the original post if it helps :) – DarkXess Jun 07 '19 at 15:06
Please take a look at this for me, I have no idea how to add Javascript to it, I have no experience in it at all. [link](http://www.mediafire.com/file/tj60gu242h15988/website.rar/file) Thanks again :) – DarkXess Jun 07 '19 at 15:15
Using checkboxes and removing items complicates it a bit more. Your best bet is follow tutorials on JS variables, arrays, and objects first, then localStorage second, and event binding third. You might want to look into JQuery for event binding as well. If I were to write a professional page to do this I'd use VueJS, which is pretty easy to pick up if you're learning JS in the first place. – MaKR Jun 07 '19 at 15:16

an_owl · Answer 2 · 2019-06-07T18:20:25.177

0

HTML is a 'front end language.' It works great in displaying information for a web based application, such as your project, but you need to integrate a back end into your app.

Since you are building a database I would recommend using an sql server postgres or mariadb to store this information. Using PHP, python, java, etc will help load the data and apply the filters to within front end.

Alternatively you use javascript and json to display this information with the requested filters as well. If the project plan is to list comics with little user interaction, javascript/json will get the job done.

--------------Edit---------------------------

If no user input is expected other then applying filters, I would recommend using datatables and a json file.

edited Jun 07 '19 at 18:20

answered Jun 07 '19 at 14:55

an_owl

69
10

Yep, I know this, but unfortunately it is only meant to be used locally so :) – DarkXess Jun 07 '19 at 15:22
That makes a little easier then. If your any not expecting user input other then applying filters, datatables will be the easiest method. Library and live examples are already built, just need to add the data and call the functions. I have updated my answer to reflect that and provide links. – an_owl Jun 07 '19 at 18:18

How to save and store user input locally?

2 Answers2