Javascript How to write localStorage script

Question

How to write localStorage script which will remember the value of turning odometer...so that each time the user visits the site again , the odometer will resume on the value on which odometer was at when the user left the site? I'm beginner in javascript so please understand...

This is my code: https://jsfiddle.net/aht87opr/17/

I've found the following code which might help with my case: http://jsfiddle.net/Jonathan_Ironman/Hn7jc/

$('button').click(function() {
    var mefedron = myOdometer.get();
    $('#value').text(mefedron);
});

You really can't get much simpler, it's a very simple key / value store.. eg.. set -> localStorage.setItem('score', theScore) & get -> theScore = localStorage.getItem('score')|0 — Keith
– Keith, Commented Aug 23, 2017 at 1:26
@Keith it would be great if somebody could adress the code in relation to the jsfiddle link which I provided. I've tried all answers here but neither worked on jsfiddle. I'm wondering what am I doing wrong. I stated that I am a beginner — Habanera
– Habanera, Commented Aug 23, 2017 at 2:02

Ryan Walker · Accepted Answer · 2017-08-23 01:37:32Z

3

Nicely done on the odometer, looks good. Local storage is simple. To set local storage:

localStorage.setItem("key", "value");

To get local storage:

var number = localStorage.getItem("key");

Be sure to try getting the local storage first so you can handle any null errors.

edited Aug 23, 2017 at 1:37

answered Aug 23, 2017 at 1:26

Ryan Walker

8743 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cyr_x Over a year ago

+1, but you should maybe mention that you should wrap localStorage usage in an try, catch block or check if it's available first, because it could be unavailable due to old browser or private surfing mode on mobile devices.

Habanera Over a year ago

@RyanWalker it would be great if somebody could adress the code in relation to the jsfiddle link which I provided. I've tried all answers here but neither worked on jsfiddle. I'm wondering what am I doing wrong. I stated that I am a beginner

Ryan Walker Over a year ago

I'm not familiar with jsfiddle, but that might be the problem. Try this on a normal .html document in your browser

t3dodson · Accepted Answer · 2017-08-23 04:40:37Z

0

Get and Set

localStorage has a few ways to get and set values to the browser. The simplest is treating it like a regular object.

localStorage.distance = 55;

you can then retrieve the value by accessing the property name you created earlier.

console.log(localStorage.distance); // "55"

Strings are stored, parse the string

Notice that localStorage.distance was set as a number but when accessed was a string. If you only need to store a number you could pass the string through a function like parseInt().

console.log(parseInt(localStorage.distance)); // 55

Another solution is to use JSON

create an object model of your odometer.

var odometer = { distance: 55, timeForOilChange: false };

Then write to the localStorage passing your model through JSON.stringify

localStorage.odometer = JSON.stringify(odometer);

and read the value back out using JSON.parse

console.log(JSON.parse(localStorage.odometer)); 
// { distance: 55, timeForOilChange: false }

edited Aug 23, 2017 at 4:40

answered Aug 23, 2017 at 1:29

t3dodson

4,0273 gold badges31 silver badges44 bronze badges

4 Comments

Habanera Over a year ago

t3dodson thank you...but I don't know how to actually implement that information to my code , would you be kind enough to help please ? jsfiddle.net/aht87opr/26

t3dodson Over a year ago

@Habanera Sorry, Stack Overflow is not a code writing service. Please ask another more directed answer for clarity. Stack Overflow will not give the complete code solution to you but will answer any conceptual problem you face.

t3dodson Over a year ago

@Habanera Here is a link to tutorials that cover basic concepts. referencedesigner.com/tutorials/js/js_1.php

Habanera Over a year ago

jsfiddle.net/nech0L9e/4 (this is my attempt to write localstorage script myself) .The problem with it is that I wanted after page refresh to go back to exact number where it was when I was leaving the page now...my local storage script, as one can see, does not do that namely there might be problems on lines 125 where I tried to create loadOrCreate function and on line 129 and 144, there has to be something wrong...@t3dodson

Collectives™ on Stack Overflow

Javascript How to write localStorage script

2 Answers 2

3 Comments

Get and Set

Strings are stored, parse the string

Another solution is to use JSON

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Get and Set

Strings are stored, parse the string

Another solution is to use JSON

4 Comments

Related