Local storage and JSON - javascript

Where are the data stored in local storage? Is it in form of some text or ASCII format or some other? Is it possible to store JSON data in text files (which can be regularly) updated and retrieve them back? I want to store some JSON data but since my requirement is not so big, I want to abstain from using a database for now.

Local storage can only store strings (any data you might have, have to be converted to string upon saving in storage and "revived" upon reading from it).
JSON data is more than fine to be stored as a string so it is good choice of format for keeping complex data in browser storage (either local storage or session storage).
You can learn more about storage here: http://diveintohtml5.info/storage.html
As to where the data is being stored, I imagine it varies from browser to browser but you don't have to worry about where is the data, since you don't have any direct access to it (only through storage API).
Edit: Quick note - I've found this article stating where is storage data stored by Firefox - https://developer.mozilla.org/en/DOM/Storage (see section "Storage location and clearing the data" at the bottom of the page).

I wrote a tiny script to allow storage, and reading of arrays, strings, and objects into local storage. IT even lets you modify nested keys within the objects you store. Here is a link to the tiny script. https://github.com/andresgallo/truStorage/blob/master/truStorage.js

Getting:
const got = JSON.parse(localStorage.getItem('my-key'));
Setting:
localStorage.setItem('my-key', JSON.stringify({ a: 'A' }));

Related

Passing dataset or datatable between two pages u

I've a popup to enter the data and once the data is added, I need to show data in parent page Gridview. But that data don't need to be stored until I click the save button below the Gridview in the parent page. It will still be displayed and maintained on the screen - (like it has active/inactive button).
When I click the save below the gridview, it will be stored in the database all at once. I need to do this using javascript. How can I do that?
I'm working on asp.net web project.
You can save your data temporarily using localStorage instead of your database for instance:
localStorage.setItem('myDataName', 'myDataValue') // Save data
And:
localStorage.getItem('myDataName') // Get data
This works for strings. If you want to save objects or arrays of objects, you must convert them to strings like this:
localStorage.setItem('myDataName', JSON.stringify(myObject)) // Save object
Take a look at LocalStorage
The localStorage property allows you to access a local Storage object.
localStorage is similar to sessionStorage. The only difference is
that, while data stored in localStorage has no expiration time, data
stored in sessionStorage gets cleared when the browsing session
ends—that is, when the browser is closed.
It should be noted that data stored in either localStorage or
sessionStorage is specific to the protocol of the page.
Store Data
localStorage.setItem('Key', 'YOUR_DATA');
Read Data
var YOUR_DATA = localStorage.getItem('Key');
You can also store objects by stringifying it.
localStorage.setItem('Key', JSON.stringify(YOUR_DATA_OBJ));
when reading parse to object
var YOUR_DATA_OBJ = JSON.parse(localStorage.getItem('Key'));

Can we store files in Chrome Storage, instead of strings

I could read in the Chrome storage API page that we can store string values inside Chrome storage against keys. Is there any way to store files against keys inside Chrome storage?
chrome.storage stores data as the JSON stringification of the values which it's given to store. So, yes, if you convert your file(s) into a form that can be converted to JSON (e.g. by JSON.stringify()), then the contents of the file can be stored. If the value that you are trying to store in chrome.storage can not be converted to JSON, then it can't be stored (e.g. DOM elements). chrome.storage does not inherently care what the data represents, only that it can be JSON stringified.
If you're asking, as stated in your comment, if it's a good idea to store thousands of different "files" totaling more than 5GB in chrome.storage, then the answer is: "NO!".
If you are looking for alternatives, then some are provided in Can you use HTML5 local storage to store a file? If not, how?

Keeping a global value in the next page [duplicate]

I want to send some data from one HTML page to another. I am sending the data through the query parameters like http://localhost/project/index.html?status=exist. The problem with this method is that data remains in the URL. Is there any other method to send the data across HTML pages using JavaScript or jquery.
why don't you store your values in HTML5 storage objects such as sessionStorage or localStorage, visit HTML5 Storage Doc to get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.
To store values for a session:
sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')
or more permanently:
localStorage.setItem('label', 'value')
localStorage.getItem('label')
So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..
I know this is an old post, but figured I'd share my two cents. #Neji is correct in that you can use sessionStorage.getItem('label'), and sessionStorage.setItem('label', 'value') (although he had the setItem parameters backwards, not a big deal). I much more prefer the following, I think it's more succinct:
var val = sessionStorage.myValue
in place of getItem and
sessionStorage.myValue = 'value'
in place of setItem.
Also, it should be noted that in order to store JavaScript objects, they must be stringified to set them, and parsed to get them, like so:
sessionStorage.myObject = JSON.stringify(myObject); //will set object to the stringified myObject
var myObject = JSON.parse(sessionStorage.myObject); //will parse JSON string back to object
The reason is that sessionStorage stores everything as a string, so if you just say sessionStorage.object = myObject all you get is [object Object], which doesn't help you too much.
possibly if you want to just transfer data to be used by JavaScript then you can use Hash Tags
like this
http://localhost/project/index.html#exist
so once when you are done retriving the data show the message and change the
window.location.hash to a suitable value.. now whenever you ll refresh the page the hashtag wont be present
NOTE: when you will use this instead ot query strings the data being sent cannot be retrived/read by the server
Well, you can actually send data via JavaScript - but you should know that this is the #1 exploit source in web pages as it's XSS :)
I personally would suggest to use an HTML formular instead and modify the javascript data on the server side.
But if you want to share between two pages (I assume they are not both on localhost, because that won't make sense to share between two both-backend-driven pages) you will need to specify the CORS headers to allow the browser to send data to the whitelisted domains.
These two links might help you, it shows the example via Node backend, but you get the point how it works:
Link 1
And, of course, the CORS spec:
Link 2
~Cheers

titanium appcelerator data storeage for newspaper/magazin

I want to develop app for viewing newspaper/magazine using Titanium Appcelerator, and I have a problem how to store data on phone that user can't access it other way than by app ? what format should that data have (blob, pdf, plain text) ? should they be stored in db, or as a files ? Can You post your suggestions below, please ?
In Titanium you have several options to store data. First you should check the data you get as input. Is it JSON or PDF or plain text or whatever.
Following options are available:
- store data using integrated databases (SQLite) - this might be appropriate when your input data is plain text or json that can converted to text or something like that. You can also store blob data in database if you want.
- store data using file system: on both iOS and Android (not mobileweb i think) you can store data persistent on the file storage. This is useful if your input data is a binary file (pdf or similar).
However in both cases the user is able and not able to read data.
- iOS: The User will be able to read documents persisted on the filesystem and maybe also data located in the database
- Android: i think on android this depends on whether the device has root access or not and where you store that data (within app folders or in external / internal but free accessible storage)
In both cases it's not easy to access this data. Usually a common user won't do that. For a professional user reading this data should be easy. So how can you secure this data, so that the user is not able to read it?
Either you store the data encrypted in a database (database encryption is not available in titanium by default so you need to use a module or encrypt data on your own) or you store it encrypted (this is also up to you - there is no ready-to-use method) on the filesystem.
In my opinion the first solution is the better one. I would do the following:
- get data (from the server or elsewhere, data type doesn't matter)
- convert to base64 (useful & required for binary files but also for plain text)
- encrypt base64 with an encryption algorithm of your choice
- store in database
because this can require much memory you should provide the option to remove this data to save space.

Client side data storage

I have the following situation: the user submits a form, I fetch the data from the server via an Ajax request and displays a chart. However, I want to give the user the option to display the data in the chart in table form or export as csv after he had submitted the form.
I was wondering what's the best solution to store the data, considering that I don't want the data to persist if the user opens a new window to submit the form again for example.
The application is in Rails.
Thanks.
You have a few options:
Cookies
LocalStorage
SessionStorage
More info: https://developer.mozilla.org/en/DOM/Storage
Non-standard:
window.name can store anywhere from 1mb up to 10mb depending on the browser. This is more of a hack, but is fairly stable. You would need to implement your own accessor/setter methods on this, where localStorage and sessionStorage have API's built in.
Personally i would recommend local storage if all your users browsers support it.
Its very simple to use and you can access it using these to methods.
localStorage.getItem("Itemkey");
localStorage.setItem("Itemkey","value");
localStorage.removeItem("ItemKey");
Its always a good way to go and this means you can assign each window a differnt local storage key and even remove the item when the window is closed, or unloaded !
For reference I found this very useful: http://diveintohtml5.info/storage.html
And combine it with storing JSON objects ( http://www.json.org/js.html ) and you have a very fast,simple and easy to use solution. OR even just store a string,array or what ever is required.

Categories

Resources