HTML and CSS Reference
In-Depth Information
model
.
set
(
tempModel
.
toJSON
());
model
.
set
({
synchronized
:
true
});
model
.
save
();
The big issue with this approach is if the model already exists and the user has made
localStorage
-based modifications to it. In this code, those models are not updated
during the pull of server-side changes. Those objects are pushed to the server to be
updated in the database.
This is not an end-all solution, and there are many frameworks currently trying to
address this problem. Many of the solutions are just as mature as the one reviewed here.
So your use of
localStorage
and syncing to a server-side database will be dictated by
the complexity of your use case.
Using Web Storage in Any Browser
Although you can use
localStorage
safely within most modern web browsers, if your
application must accommodate browsers without
localStorage
, you can use some
easy-to-follow, lightweight polyfills. For example, the following example polyfill ac‐
commodates IE 6 and 7, as well as Firefox 2 and 3. With the exact same API as defined
in the Web Storage spec, you can start using it today with roughly 90 lines of JavaScript
included in your application. (For the full source, see
https://raw.github.com/wojodesign/
(
function
(){
var
window
=
this
;
// check to see if we have localStorage or not
if
(
!
window
.
localStorage
){
// globalStorage
// non-standard: Firefox 2+
// https://developer.mozilla.org/en/dom/storage#globalStorage
if
(
window
.
globalStorage
)
{
// try/catch for file protocol in Firefox
try
{
window
.
localStorage
=
window
.
globalStorage
;
}
catch
(
e
)
{}
return
;
}
// userData
// non-standard: IE 5+
// http://msdn.microsoft.com/en-us/library/ms531424(v=vs.85).aspx
var
div
=
document
.
createElement
(
"div"
),
attrKey
=
"localStorage"
;
div
.
style
.
display
=
"none"
;
document
.
getElementsByTagName
(
"head"
)[
0
].
appendChild
(
div
);
if
(
div
.
addBehavior
)
{
div
.
addBehavior
(
"#default#userdata"
);
