I was wondering if it is possible to keep some data even after refreshing the page. For example, I have values in my array and I don't want to lose them after refreshing the page.
Use Cookies in javascript or the HTML5 localStorage,sessionStorage variable .
To use HTML5 LocalStorage, simply use it like variable preceded by localStorage.
localStorage.variable=['wrg','wg','wg'];
To use HTML5 sessionStorage, simply use it like variable preceded by sessionStorage.
sessionStorage.variable=['wrg','wg','wg'];
For more Info See Here
I have used jStorage in the past for storing data, its uses HTML 5 local storage where available and falls back to other methods when needed.
$.jStorage.set(key, value, options)
value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")
There is a trick w/ window.name in some browsers which allows to keep data even after refresh. Window name can store a json of your array.
window.name = "[JSON]";
BTW, Dojo implemented wrapper around window.name
Dojo WindowName
Set a cookie with your values and request the cookie.
One way is to create Cookie and store in it $.cookie("SomeKey", 1);
Related
As per my new requirement I have to change the name of the local-storage collection name, which is by default set to its domain name. Is this possible? I have already searched it and didn't get anything. It is just to confirm that is this possible.
Suppose I have a domain named : http://www.example.com
then the local-storage will be created as http://www.example.com and its key value pair.
I want to change this from "http://www.example.com" to "http://www.example.com_local".
Please confirm me if it is possible anyhow. I am building an Umbraco website using MVC 4.
Thanks in advance.
If it's not the key you want to change, but the value, then remember that localStorage operates on strings and only persists the value when you call setItem.
Keeping a reference to the original value you are setting, and changing that will not change anything in the localStorage. When dealing with the localStorage HTML5 API, then you need to re-set the value when you change it. You also need to re-set the value (and remove the old) if you change the key.
If you are using some helper API/library, then anything(almost) could be wrapped in it, making it impossible for me to help unless i know what library that is.
I'm using AmplifyJS Store. I think it's a good wrapper for persistent storage. I've been using it in a JQuery plugin and it works pretty well.
Lately though, I've been wondering if I can just do the same thing using a namespace variable in the window object?!
AmplifyJS Store + JSON2.js (required for data serialization) costs me 22Kb (8Kb minified) of file size alone, not to mention the additional supporting code I've had to create around it. Also, I'm using only sessionStorage (i.e. I have no need for persistence after the browser window closes, only while the window is active).
So, is there really any major reason I can't use the window object instead of AmplifyJS Store for my specific circumstance?! I've thought about the expiry feature but I can easily build in same functionality in a few lines of code.
Thanks.
HTML5 localStorage in window object by itslef has a very simple api:
var valueOfName = window.localStorage.getItem("name");
window.localStorage.setItem("name", "value");
you can even omit global window object:
var valueOfName = localStorage.getItem("name");
localStorage.setItem("name", "val");
moreover you can apply array-style notation:
var valueOfName = localStorage["name"];
localStorage["name"] = "value";
that is it! And it doesn't have an expire date, URL strings or other complications in its API which took place in elder cookies-approach. All what AmplifyJs provides (as I can see) is a support for older browsers (who were using cookies) by givin' you the same API as original localStorage does.
In other words if you are not targeted on Netscape Navigator, Mosaic and IE 7 you can forget about using of AmplifyJS and apply native localStorage API.
However despite an approach, you should never rely on client-side persistance for sure, because it is totally dependent from local browser (client could simply clear cache, reinstall something or sign-in from other computer) - use server-side databases and similiar technologies for saving user's info.
If you are actually trying to save persistent data (data that is still there if the page reloads or the user navigates away), storing it on the window object is not an option. The data won't be there when you check for it later.
Is it possible to edit a field inside a cookie using javascript? The cookie looks like this
cookie_session=[{"id":"1526","username":"test","email":"test#test.com"}]
For example, is it possible to edit the value of the field username?
I'm trying to use
document.cookie="Field=myValue"
But when i use it, it sets the whole value of the cookie to myValue instead of a certain field within it.
Also, would it be possible to parse the value of username to use it later for a POST request?
A cookie is simply a string. You are storing javascript objects inside of a cookie. In order to modify a single part of the object, you will need to decode the JSON, edit the property, and re-encode the object back to a string to store it in the cookie.
btw - cookies were not meant to store javascript objects. If you don't need the data on the server, then you are better off using local/session storage. There are jQuery plugins which allow those mechanisms to work in a cross-browser friendly fashion.
EDIT: an example can be found here: Pure Javascript - store object in cookie
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
You can use cookies or localStorage.
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/ :-)
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
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.]
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.
Use Cookie.
How to access via javascript.
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
Take a look at HTML5 Local Storage
Suppose a javascript holds an object on page A (www.example.com/a.html)
Suppose the user clicks on page B (same domain) (www.example.com/a.html)
is it possible for the javascript on page B to access the object from a.html ?
I don't want tricks to transfer the object, like posting to the webserver or adding parameters to the url.
Thanks,
E
p.s.
Just adding this 'p.s.' following some of the answers:
Using a cookie is not an option because the data on page A would be very very very large.
There's no direct way for page B to access the object, because the object will no longer exist once page A is unloaded. As other answers note, you can store the object somewhere, and then page B can get a copy of the original object from page A.
A cookie is another alternative to local storage.
Not a true solution but html5 localstorage might be an option. (That is if you want to live on the bleeding edge of web technology.)
And the best part: it does not include any post/url tricks as you requested. :-)
Check out the jStorage plugin here: http://www.jstorage.info/ Works on almost all engines that matter: Trident, Gecko, Webkit, etc.
Its a simple way to store objects.
In general, no -- state is not preserved between requests in a browser. When you navigate between pages, the first page is completely unloaded (DOM, Javascript variables, etc.) and the second page is then loaded.
There are some ways that you can preserve data outside of Javascript without hitting the server though, such as cookies, or HTML5's localstorage as Chris mentioned.
What about saving the serialised object in a Cookie using JSON?