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

Answer 1

You can use cookies or localStorage.

Answer 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

Answer 3

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/ :-)

Answer 4

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.]

Answer 5

I highly suggest using localStorage for a few reasons:

1. It's supported by modern browsers, INCLUDING IE.
2. You can store up to 5MB of data (10 in IE) where as a cookie is mere 4KBs
3. 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.

Answer 6

Use Cookie.

How to access via javascript.

Answer 7

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

Answer 8

Take a look at HTML5 Local Storage