I have document (component tree) 'm' which i am trying to store in the local storage of html5. I tried setting it to local storage. but when i retrieve it back, this m has changed to [object Document].
How do i store document to local storage and retrieve it as document itself?
Below is the code i have tried
the application sends a ajax request to server to retireve events of a calendar and in the request's onsuccess the dom representation of xhtml is recieved.
when the user goes to next week view, the app has to retieve the event from the localstorage. to send the response to the client from the js file, the dom representation is also necessary.so we need to store the dom representation to the localstorage.
my requirements is in 1st picture's console, you can see 'k' is retrieved from the document m and is send as response to the client side.So, what I want is to store this k or m to local storage so i can manipulate it in the same js file.this code is in a separate js file which is used in the xhtml file.
I am using primefaces 4.0, jsf 2.1.
when i use
localStorage.setItem("calendarevents",JSON.stringify(k));
I get an error 'converting circular structure to json'.
You need to store a string representation of the document's html by doing:
localStorage.setItem('calendar', document.documentElement.innerHTML);
When you do this:
localStorage.setItem('calendar', document.documentElement);
...it stores the result of document.documentElement.toString() in localStorage, which doesn't work for your purpose.
localStorage converts every value to a string. To store objects you have to use a workaround.
I guess you could use the method described in this answer
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));
Related
I am currently learning JavaScript and PHP, and I came across a simple problem .
I have a script file which collects some certain data , and I can save it to a variable . what I'm struggling with is to open another page (.PHP) and set the collected data into a textarea tag I have in that page . So for recap ,I click on send , the script collects data ,opens second page and puts it into the textarea I created for it.
document.getElementById('getJSON').addEventListener('click', function() {
var survey_schema =formBuilder.actions.getData('json'); //the variable i want to send
alert (survey_schema); // just test alert to check data
//some code should be here (any help ??)
});
any help is appreciated.
thank you in advance
You can use localStorage that in a kind of shared memory for the browser:
The localStorage and sessionStorage properties allow to save key/value
pairs in a web browser.
var yourObj = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage in first page with a custom key
localStorage.setItem('KeyObject', JSON.stringify(yourObj));
// Retrieve the object from storage in other page based on key
// Note that also you can send key as queryString
var retrievedObject = localStorage.getItem('KeyObject');
//convert to josn
var json = JSON.parse(retrievedObject)
console.log(json);
I have a html page which contains a form element with some text and file input elements.
This from is submitted with an ajax call to the server using a method suggested here: How can I upload files asynchronously?
As you may see in the referenced page from the above link, the FormData() object is used as a container for inputed data and I have done the job successfully.
But now we want to create a new page that have these html elements, save the text and file inputs on client side (Cookie or Local Strorage or . . .) and do the ajax submit later on another page.
I wasn`t able to save new FormData() in either cookie or local storage; what got saved is a small string:"[object FormData]" instead of entered file and strings.
I also tried using JSON.stringify() with no success; it just returned an empty JSON("{}").
(the code is using jQuery selector)
var postData = new FormData($(form)[0]);
// var sPostedData = JSON.stringify(postData); // returns: "{}"
var myStorage = window.localStorage; // returns: "[object FormData]"
myStorage.setItem("contentOrder", postData);
Please help, how should I save this object on my client-side?
To get the file from form data use formData.get('file') where file is the name of an input. The returned object will be of type Blob (see how to get its content).
The complete example can be found in this fiddle: https://jsfiddle.net/skm5m467/1/
I use UIWebView in the iOS project.
In js code in this webview I use local storage (reading data from local storage by key and writing data to local storage by key).
var items = JSON.parse(localStorage.getItem('key')) || []; //reading
localStorage.setItem('key', newJson); // writing
Now I use only one key for using local storage.
It works fine.
But local storage in common for all UIWebViews in the project (Am I right or not?). And when I use two or more UIWebView in the project (js code is similar for all webviews), that I need use more than one key for using local storage (one key for every UIWebView) in order to every webview use own storage.
How I can define which UIWebView uses local storage now in order to use key for this UIWebView?
How I can get UIWebViews id in java script?
You can save an object in localStorage().
In this way you can save data for more that one UIWebView in client memory and retrieve it easily by key.
An example:
// create an object with some properties (as value use data from UIWebView)
var uIWebViews = { 'uIWebView1': 1, 'uIWebView2': 2, 'uIWebView3': 3 };
// save your object into local storage
localStorage.setItem('uIWebViews', JSON.stringify(uIWebViews));
// retrieve the object from storage, remember to parse it
var retrievedObject = JSON.parse(localStorage.getItem('uIWebViews'));
// get the object
console.log('retrievedObject: ', uIWebViews);
// get a property, equivalent to get a key
console.log('key uIWebView2 has value: ', uIWebViews.uIWebView2);
Live example, please open console to see the result: https://jsfiddle.net/hsf8gf8d/
To let the JS code know what webview it runs in I would call its stringByEvaluatingJavaScriptFromString: method with a predefined JS method that sets a variable in your page. So your JS code could have something like
function setWebViewID(webViewID) {
// save the identifier somewhere and perhaps call other functions
}
Then in the webView, once the page is loaded and all, you call
[myWebView stringByEvaluatingJavaScriptFromString:#"setWebViewID(\"myID\")"]
The trick is usually ensuring that the content is done with any other stuff it does in JS right after loading. If you need something like that I'd recommend using WKWebView, WKUserContentController and to look into addScriptMessageHandler:name:. With that you can properly set up listening for events in JS from the webview.
According to the W3 Web Storage specs, values in localStorage are of type string.
Thus, an entry can't be granularly updated like a subproperty of a JS object and it's only possible to replace the entire key:
Updating/editing localStorage - JSONObject
Assume I want to "secure" user input frequently on the client side in the localStorage, and also update it on model changes on the server (only transmitting changes from server to client). How often can I JSON.stringify() my local data (=ViewModel state) and save it to the localStorage without causing trouble for the user? Is serializing and saving (not transmitting!) e.g. 30KB of data every 5 seconds to the localStorage going to cause lags?
Bonus question: Does any major browser vendor plan on storing JS objects directly in localStorage?
This may not be entirely true; there is a method for updating a single key to an object housed in local storage, and the code is below.
var updateLocalStorageKey = function(obj, key, val) {
var localObj = JSON.parse(localStorage[obj] )
localObj[key] = val;
//reset storage
localStorage[obj] = JSON.stringify(localObj)
}
The working jsbin is here: http://jsbin.com/jesapifa/4/edit?html,js,output
Hope this solves your problem!
I'm trying to use HTML 5's local database feature on a Mac Dashboard widget.
I'm programming in Dashcode the following javascript:
if (window.openDatabase)
{
database = openDatabase("MyDB", "1.0", "Sample DB", 1000);
if (database)
{
...database code here...
}
}
Unfortunately the database-variable remains always null after the call to openDatabase-method. I'm starting to think that local databases are not supported in Widgets...
Any ideas?
/pom
No you will not be able to do the above. And even if you could then you would not be able to distribute the widget without distributing the database assuming it was a MySQL or SGLite. (not sure what you mean by HTML 5's local Db.
here are a number of ways round this:-
You can add a data source which can be a JSON file, or an XML file or and RSS feed. So to do this with JSON for example you would write a page on a server in PHP or something that accessed a database so that when the URL was called the result was a JSON string. Take the JSON string and parse it and use it in the Widget. This will let you get data but not save it.
Another way would be to use the user preferences. This allows you to save and retrieve data in the individual widget.
So
var preferenceKey = "key"; // replace with the key for a preference
var preferenceValue = "value"; // replace with a preference to save
// Preference code
widget.setPreferenceForKey(preferenceValue, preferenceKey);
You can then retrieve it with
var preferenceForKey = "key"; // replace with the key for a preference
// Preference code
preferenceForKey = widget.preferenceForKey(preferenceForKey);
The external call, you could also use REST will let you read any amount of data in and the preferences will let you save data for later reuse that will survive log out's and shut downs.
The Apple site has a lot of information about Widgets and tutorials as well thjat are worth working through.
Hope this helps.