سؤال
Is it be possible to build a pure Html page (no php, no asp, no server-side) with a form that, though javascript only, will preserve its selected checkbox upon submission?
More specifically, I need to build a table that updates itself in realtime (as excel does with formula calculations) when some checkboxes are clicked. I cannot find a way to store a checkbox's state because on every page refresh (form submission action) the javascript variables will be reset.
المحلول 2
With JavaScript you could just write event handlers for the checkbox 'check' event and therefore not require a form submission.
Libraries like Knockout.JS allow you to update things like tables in 'realtime' based on calculations without requiring a page refresh.
نصائح أخرى
The supposed answer to your solution is localStorage()...
It's Javascript dependent and definitely not a perfect solution, but HTML5 localStorage allows you to store preferences on your users' computers.
First, detect support for localStorage():
https://stackoverflow.com/questions/18130156
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianif (Modernizr.localstorage) { // with Modernizr
if (typeof(localStorage) != 'undefined' ) { // Without Modernizr
Then set a parameter if it's supported:
localStorage.setItem("somePreference", "Some Value");
And then later retrieve it, as long as your user hasn't cleared local storage out:
var somePreference = localStorage.getItem("somePreference");
When you want to clear it, just use:
localStorage.removeItem("somePreference");
For those using unsupported (older) browsers, you can use [local storage hacks][2] abusing Flash LSOs, but those are definitely not ideal.
What about sessions or cookies?
Both of these are intentionally temporary forms of storage. Even Flash LSOs are better than cookies for long-term storage.
You store things locally within the browser. If the user clears their cache and local storage, everything is gone.
You can't use sessions as these are server-side. You can, however, use cookies to store / retrieve data from. See here.
You can alter the URL using HTML5's push state event. You would append parameters "GET request style" on every event you require a change to.
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = node.getElementByID('click');
link.addEventListener('click', change_my_url, false);
</script>
<a href="#" id='click'>Click to change url to bar.html</a>
Personally, I'd use the HTML5 local storage. But remember - you can't rely on your users having accurate data if they play with the cache. For mission critical stuff, you really should use a server side language (that's what it's for).
Useful links:
