I am trying to understand the features of the localStorage. Suppose, I am storing large json via localStorage. I want the stored data to be shown to the testing team. If I display the stored data in a HTML page and then send the link to the testing team then they will see null, as localstorage stores data locally. The data is too large to copy/paste in a .txtfile. Is there any way of displaying localStorage data, so that it can viewed by others remotely?
The clue is in the name - local storage is local.
There is a work around in that you use iframes and the postMessage API to access localStorage from an external domain.
Is it possible to use HTML5 local storage to share data between pages from different sites?
As Jack Zelig points out, localStorage is local. But it is not only local to the domain but also to the particular browser on the particular machine. You cannot share it between browsers nor between devices. There is no work-around for that. To show it to remote people, you MUST be storing it or sending it through a server to which both devices/browsers are connected, at which point localStorage is irrelevant.
Think of localStorage as a new, improved version of cookies.
Related
I need to programmatically store data on the client side without having to transfer the data from the server on every page load. I considered generating a dynamic JavaScript file with the needed data for the current session of the user and make sure it is cached, but that seems really messy and there are a few drawbacks I can think of to such an approach.
How can I go about storing persistent data on the client side?
You can use the Web Storage API (Window.localStorage or Window.sessionStorage). Check out this article on html5doctor for a more in-depth explanation. The Web Storage API is supported by all modern browsers at this point.
The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
As highlighted above:
To store the data indefinitely (until the cache is cleared), use Window.localStorage.
To store the data until the window is closed, use Window.sessionStorage.
There are two methods of setting and getting properties via the Window.localStorage and Window.sessionStorage API's:
Access the properties directly:
localStorage.name = 'ashes999';
console.log(localStorage.name); // ashes999
delete localStorage.name;
console.log(localStorage.name); // undefined
sessionStorage.name = 'ashes999';
console.log(sessionStorage.name); // ashes999
delete sessionStorage.name;
console.log(sessionStorage.name); // undefined
Use the Storage.setItem, Storage.getItem, and Storage.removeItem API methods.
localStorage.setItem('name', 'ashes999');
console.log(localStorage.getItem('name')); // ashes999
localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // undefined
sessionStorage.setItem('name', 'ashes999');
console.log(sessionStorage.getItem('name')); // ashes999
sessionStorage.removeItem('name');
console.log(sessionStorage.getItem('name')); // undefined
Caveats:
Browsers may impose limitations on the storage capacity per origin of the Web Storage API, but you should be safe up to 5MB.
The Web Storage API is limited by the same origin policy.
Access to Web Storage from third-party IFrames is denied if the user has disabled third-party cookies in Firefox
You may store data in window.name, which can hold up to 2MB of data (!).
/* on page 1 */
window.name = "Bla bla bla";
/* on page 2 */
alert(window.name); // alerts "Bla bla bla"
Edit: Also have a look at this Ajaxian article regarding this.
Note that other sites in the same tab/window does also have access to window.name, so you shouldn't store anything confidential here.
If you really need to do this (and I definitely have doubts that it's a good idea at all), your extra javascript file idea isn't as bad as you think. Just use JSON notation to keep the data and it's pretty easy to load and unload as needed. If you keep in some well-thought-out logical divisions you should be able to update just parts of it on demand, as well.
What about Google Gears. It is made for offline storage, but I think it might work.
http://code.google.com/apis/gears/design.html
From the documentation:
Storing User's Data
Applications that are more than just
static files have data that is
typically stored on the server. For
the application to be useful offline,
this data must be accessible locally.
The Database module provides a
relational database for storing data.
On the Architecture page you will find
a discussion of strategies for
designing the local storage that your
application needs.
When an offline application
reconnects, you will need to
synchronize any changes made in the
local database with the server. There
are many different approaches to
synchronizing data, and there is no
single perfect approach. The
Architecture page describes some
strategies for synching.
An additional feature of the Gears
database is Full-Text Search,
providing a fast way to search text
within a database file. Read the
details here.
The Web Storage API has a limit of 5MB for local storage, but it's possible to store greater amounts of data on the client-side using IndexedDB. In some newer browsers, it is also possible to cache data for offline use using Service Workers.
URL fragments can also store client-side data, though they can store only a few thousand characters in most browsers.
Client-side storage is usually limited to just one origin, though it is possible to share it between origins using postMessage().
I'd like to create a web app where the user is able to create a session, with the session being accessible even after leaving the page/browser.
An example would be http://lichess.org where the user goes to 'Create a game' and a page is created. That page then remains accessible even after the session is finished; see: http://en.lichess.org/i8pV0vEv
Essentially what I'd like to know is, what would be needed in order to create a similar effect. I've programmed tonnes over the years, just web environments are new to me! Scala seems like a contender, but in all honesty I have no clue. Perhaps javascript?
Any advice would be appreciated, thanks.
If you want to store user session data permanently irrespective of whether user is on the website or not you may use browser storage facility of HTML 5.
where you can store data on user's browser in form of key value pair and the data will be there permanently(based on type of browser storage you are using) and you can easily manipulate data using javascript.
There are mainly two types of browser storage.
Local Storage: will be there permanently and can be accessed anytime you want.
Session Storage: will be there till the page is open and cleared when user close the browser window.
For your requirement my recommendation is to go for Local Storage
Advantages of Using Local Storage
Can be manipulated easily using JavaScript.
Will be permanent.
No server-side scripting hence, fast to load and manage.
Disadvantages of using local storage
won't work in browser not supporting HTML5(supported in IE 8,chrome 4,Mozilla 3.5,safari 4,opera 11.5 and above)
User will be able to manipulate/delete the value(The browser storage value can be manipulated using resource option of Browser developer tool)
Wont be permanent if user is visiting in In-cognito/in-private mode.(but will be stored during the session.)
Data limit of at least 5MB
Data will be deleted when user clears browser history.
for further reference checkout w3schoold
http://www.w3schools.com/html/html5_webstorage.asp
Web programming is generally session-less and you need a cookie to simulate a session. You save this in your client's browser and in a database to be able to tie them together. Or you can use the browser-session which in the end is also a cookie, but does not scale very well as it's saved in the internal mechanisms of the web-server.
There's nothing Scala specific here, but if you would like to give Scala a try, have a look at Play framework. It's pretty beginner friendly and already has built in support for everything you would need like Sessions, Cookies and Database access.
I am building a hybrid app (Ionic) and only need local storage to save my database objects.
The app simply allows you to store, edit and view simple Notes.
Now, obviously I need to make sure that when the user saves a note, it remains stored on his phone.
My question is, are there any dangers of using window.localstorage in this context? Moreover, in which cases will the user loose all its data? One obvious case is when he deletes and re installs the app.
If local storage is not the way to go, what other ways are there (or does it always require a server side solution)?
Local storage is indeed an easy way to store data in a Cordova app.
As pointed out by JohnAndrews all the data can be lost if the user clean the application data.
On top of that LocalStorage present some limitations:
it very handy for key-value pairs but can be hard to store complex data
You cannot "query" your data
If you are using more than 1 webview on your mobile app you need your HTML5 content to came from the same domain, otherwise the LocalStorage data will not be shared across webviews.
If you want to have more info about data storage possibilities on Ionic (Cordova) apps check their official docs http://cordova.apache.org/docs/en/4.0.0/cordova_storage_storage.md.html
There are a few limits I found serious when using localStorage (in my case) including:
Storage limitation (~5MB) depend on browser (for more info here)
Only store string so you will end up convert into json (JSON.stringify) and query through json object
Once the mobile storage is full, it will force pure all the data inside storage
I end up looking for new candidate (sqlite seem promising but having some issue for iOS 10)
On the other hand, if your application store small amount of data or mostly do transaction with online database. localStorage seems pretty good
Easy to use, already available for most browser
Json work like NoSQL
In javascript, is there a clear and concise substitute for cookies? I am currently storing game saves in cookies, and looking for a way to make them harder to accidentally (or purposely) delete.
There are really not that many places to store data. You can really store it in two places:
The client's machine: There are other options besides cookies, but they are just as likely to be cleared if the user wishes. Cookies are probably still the easiest way to go about this.
Your server: You could create some login system or other to store the data locally and then determine what saved data corresponds to which client.
I still think your best option here is to use cookies. Most games rely on cookies or browser saved data anyways and clearing that within the browser deletes progress.
If you really do not like cookies:
With the introduction of HTML5 you can now save data within the browser, for more information see here: http://www.sitepoint.com/html5-web-storage/. This could allow for more data to be saved and speed up the requests, but also will probably get cleared if the user clears their cookies.
This isn't a native iPad app. This is a HTML5 web app which runs from the iPad's local storage (so it will display offline).
What I need to do is have a form which collects information and stores it somewhere locally for retrieval later.
Is there any way I can achieve this. I don't care how the data is stored, just that it doesn't expire (like cookies do) and its relatively easy to retrieve at a later date.
Thanks
Apple have a Safari Client-Side Storage and Offline Applications Programming Guide section in their documentation. It lists the various options.
Key-Value storage sounds like it best fits your usecase.
If you don't care what you use, you can just as easily use cookies and set their expiration date to the year 3000 or something!
Alternatively you can take advantage of localStorage and store the form data in JSON format.