Store Javascript variable client side

Question

Not duplicate : I've read many questions like this and it always ended up "use PHP or server-side stuff, and watch out for injection/data manipulation".

I want to store simple stuff on the client side (save and load), like a Google Map location, and want it to stay between refresh of the page.

I don't want to use PHP or any server-side thing.

How can I proceed ?

Thanks

Hendrik · Accepted Answer · 2020-09-07 10:39:24Z

4

You can use cookies or localStorage.

edited Sep 7, 2020 at 10:39

Hendrik

4731 gold badge7 silver badges19 bronze badges

answered Apr 21, 2011 at 17:08

Zirak

40k13 gold badges85 silver badges92 bronze badges

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

1 Comment

Matthieu Napoli Over a year ago

I used localStorage as a jquery plugin : github.com/medialize/jQuery-store. Thanks

Ekim · Accepted Answer · 2011-04-21 17:26:06Z

2

If html5 is not a problem I would say localstorage is the way to go:


//set value
 localStorage.setItem('todoData', this.innerHTML);

//read value
 if ( localStorage.getItem('todoData') ) {
    edit.innerHTML = localStorage.getItem('todoData'); 
 }

ripped from http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/ :-)

answered Apr 21, 2011 at 17:26

Ekim

1,10511 silver badges29 bronze badges

Comments

Julian Lannigan · Accepted Answer · 2015-06-12 15:05:42Z

2

There are multiple options to store data in client side - IndexedDB, localstorage, webSQL, SessionStorage, Cookies, etc.

IndexedDB

Data can be queried efficiently. No limitation in size( but volume or disk drivers limits the size )
It will store in Key-Object format
It will not be supported in safari browser
Support Queries
Asynchronous

localstorage

It will store value in key-value format (value should be always String)
Synchronous
Helpful if you need to store a small amount of data
Limited size (Depends on browser)

Session Storage

If the user closes the tab, it will clear the data

You can check YDN-DB here

edited Jun 12, 2015 at 15:05

Julian Lannigan

6,5223 gold badges21 silver badges12 bronze badges

answered Jun 12, 2015 at 14:38

srinath

544 bronze badges

Comments

Random832 · Accepted Answer · 2011-04-21 17:08:52Z

1

The key issue you have to keep in mind is you can't trust the client. If it's okay for the client to ask for any location, then it's okay for you to store the location on the client side. But you can't confirm that the value that you get back from the client side is one you have given to that client.

That's what it meant by "data manipulation" [injection is a special type of data manipulation, in that it is manipulated to include things like end quote marks if you're using it as part of a SQL query or other script.]

answered Apr 21, 2011 at 17:08

Random832

39.3k3 gold badges48 silver badges65 bronze badges

2 Comments

Matthieu Napoli Over a year ago

Of course, but I never get the location back ! That's just a static webpage... They can do whatever the heck they want with the script and its variable.

Oscar Godson Over a year ago

I agree with you Matthieu, the data you want to store is fine to store. Im not sure why people get so up tight about storing data locally. It really doesnt matter unless its like a password or bank pin or 5MBs+ (due to technical limitations at the moment). Whats the worst that could happen anyways?

Oscar Godson · Accepted Answer · 2011-04-21 17:14:09Z

1

I highly suggest using localStorage for a few reasons:

It's supported by modern browsers, INCLUDING IE.
You can store up to 5MB of data (10 in IE) where as a cookie is mere 4KBs
There's lots of libraries to make this easy. One of the most popular is LawnChair: http://westcoastlogic.com/lawnchair/ This will actually write to multiple places, including cookies, so that data isn't lost easily.

Also, as a note, you can't store objects with localStorage, just like you cant with cookies, however you can convert them. For example, if you want to store a Date() don't store it as new Date() store it as: '\'+Date().getTime()+'\'. Same for other objects.

answered Apr 21, 2011 at 17:14

Oscar Godson

32.9k42 gold badges129 silver badges207 bronze badges

Comments

amit_g · Accepted Answer · 2011-04-21 17:07:06Z

0

Use Cookie.

How to access via javascript.

answered Apr 21, 2011 at 17:07

amit_g

31.3k8 gold badges67 silver badges124 bronze badges

Comments

Will · Accepted Answer · 2011-04-21 17:07:50Z

0

How about storing it in a cookie? For JavaScript I recommend using jQuery, which simplifies a lot of work.

e.g. http://plugins.jquery.com/project/Cookie

answered Apr 21, 2011 at 17:07

Will

3,0088 gold badges37 silver badges50 bronze badges

Comments

Bill the Lizard · Accepted Answer · 2012-08-04 23:15:14Z

0

Take a look at HTML5 Local Storage

edited Aug 4, 2012 at 23:15

Bill the Lizard

407k213 gold badges579 silver badges892 bronze badges

answered Apr 21, 2011 at 17:08

Imran

91.7k26 gold badges101 silver badges132 bronze badges

Collectives™ on Stack Overflow

Store Javascript variable client side

8 Answers 8

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related