I have faced a hurdle regarding the localstorage get and set.
Scenario: I am inserting data from form elements and caching it in an object and this object is pushed inside an array. So every time I am entering data into form elements those data are stored in an object and that object is pushed in an array. After pushing the object in the array userAry.push(newUser).
I have setItem the array in localstorage
localStorage.setItem('userDataStore',JSON.stringify(userAry))
Inside document.ready I have
$('#getResult').html(localStorage.getItem('userDataStore'))
Problem:
Inside document.ready the $('#getResult').html(sessionStorage.getItem('userDataStore')) is not showing the array. Instead it is only showing the recently added data.
If I fill up the form twice consecutively then after page refresh it is showing those 2 data. But if I add another data and refresh the page it should show 3 data instead it is showing the recently added data.
Code:
var newUser = {
userName : username,
userPhno : userphno,
userEmail : useremail,
userPass : userpass,
userConfirmpass : userconfirmpass,
}
userAry.push(newUser);
localStorage.setItem('userDataStore',JSON.stringify(userAry));
Inside document.ready I have
$('#getResult').html(sessionStorage.getItem('userDataStore'));
#NoviceCoder, To work with localstorage you can try below scenerio.
response = ['A', 'B', 'C', 'D'];
localStorage.setItem("marketPlaceNames", JSON.stringify(response)) // to set value
JSON.parse(localStorage.getItem("marketPlaceNames")) // to get value
in document ready, you should set up variable userAry too. Not only fill the HTML content. then when you push a new item it will add it to the others already created and then when you store the array, you store whole users not only newly added
userAry = sessionStorage.getItem('userDataStore');
$("#getResult").html(userAry);
In your code replace this line localStorage.setItem('userDataStore',JSON.stringify(userAry)); with sessionStorage.setItem('userDataStore',JSON.stringify(userAry));
Check it below code how to get, set and remove data from sessionStorage.
For example :
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from sessionStorage
sessionStorage.clear();
Related
I want take list of purchased products. Unfortunately there are no product details on my "order-received" page. Can I get product details from the previous page using GTM?
Order-received Page
I have product details on a previous(basket) page:
function printOrderItems() {
var hrefs = document.querySelectorAll("#form_cart > table > tbody > tr > td.product-info > a");
var result = [];
hrefs.forEach(function(t) {
result.push(t.text)
});
return result;
}
previous page
this is being created when a customer chooses to make an order correct? could you not, using a jquery click event, send that information via an ajax and then load your order received page dynamically from a handler?
In case you still need an answer: Use a custom HTML tag to extract the products on the basket page and store the result in sessionStorage. SessionStorage accepts only a string, but you can use JSON.stringify to convert the array of product names into a string.
On the 'order-received' page use a variable of type Custom JavaScript to retrieve the products from sessionStorage. Use JSON.parse to convert the string back to an array. Then you can use this variable in any GTM tags that you want to run on that page.
Note though that sessionStorage is only available within the same subdomain and within the same tab. If that is an issue you could try to use a session cookie to persist the data from one page to the next. However, cookies are limited in size and therefore are not really suitable for persisting a potentially long list of product names.
I am storing the values in localStorage and the values are getting stored through input[type:hidden] and input[type:text].
JS:
$('.proceed_btn').on('click', function() {
// Blank to start with
var order = {};
// Loop through all inputs...
$('input[type="text"], input[type="hidden"]').each(function() {
// ...adding their values as properties
order[this.name] = this.value;
});
// Store that object in JSON format
localStorage.setItem("order", JSON.stringify(order));
});
I want to print these value in other page when the user redirects after submitting the form. I am working on ruby currently. There are many products in the website, so the information in the summary page gets rendered according to that. Is there any way to display specific form details in through there id's?
You can create a partial with .js.erb extension eg _order_partial.js.erb and retrieve the order object as thus:
order = JSON.parse(localStorage.getItem("order"));
// Loop through the object and print out
Then you can render the partial in any of the views file you want to use it.
I need to know how I can show the input data of a form after a user presses the back button.
Here is the working jsfiddle
I created a simple asp page.
If I click next after entering some input value, it will go to next page, and again I click back, it doesn't show entered input values.
$("#form").submit(function() {
var inputs=$('.input');
for(i=0;i<inputs.length;i++)validateEmail(inputs[i]);
if($('.invalid').length!==0)return false;
});
I need to show those values. How can I achieve this? Thanks in advance!
Note: In my jsfiddle didn't include next page action.
You have several methods, althought I'm not a big fan of cookies because they are not so smart to manage.
You can either use:
The localStorage API, if you want your values being saved until the user clears the cache, like this:
var myValues = [];
for(i=0;i<inputs.length;i++) {
validateEmail(inputs[i]);
myValues.push(inputs[i].value);
}
// Save them fot later use
localStorage.myValues = JSON.stringify(myValues);
// After clicking the button you can retrieve them back
var oldValues = JSON.parse(localStorage.myValues);
The sessionStorage API, which lives for the current session of the browser (i.e. when the user closes the browser it gets deleted):
var myValues = [];
for(i=0;i<inputs.length;i++) {
validateEmail(inputs[i]);
myValues.push(inputs[i].value);
}
// Save them fot later use
sessionStorage.myValues = JSON.stringify(myValues);
// After clicking the button you can retrieve them back
var oldValues = JSON.parse(sessionStorage.myValues);
NOTE: I'm using JSON.parse and JSON.stringify because both storage objects (local and session) can only store data in string format.
I'm building an image gallery on WordPress and I want to add a save to lightbox or save to collection function so that I can collect images with a click of a button and then download all images as a zip later. It sorta like a shopping cart without actually buying the stuff that you want. I want it just to be a per session kind of thing so that you don't need to register to the site.
So on my images page, I put a Save to lightbox button and I want to save the ID of this image to a cookie and then I keep adding images to it until I'm done and will click a view lightbox button that will list all of my collected images.
I know how to set a cookie but I don't know how to append values to it.
function saveLightbox(ID){
$.cookie('the_cookie', ID, { expires: 7 });
document.getElementById("result").innerHTML = $.cookie('the_cookie');
}
Here's fiddle of roughly how I want it to work.
To append values to the jQuery cookie, first of all you have to enable the storage of objects. Then you initialize a variable holding the content of the cookie. If the cookie is empty then initialize an empty array. Next, you push the ID to the array. Finally, you store this array in the cookie.
The following code illustrates what it is said above:
function saveLightbox(ID){
$.cookie.json = true;
var idContainer = ($.cookie('the_cookie')) || [];
idContainer.indexOf(ID) === -1 && idContainer.push(ID);
$.cookie('the_cookie', idContainer, { expires: 7 });
document.getElementById("result").innerHTML = $.cookie('the_cookie');
}
Another thing to consider, is that once an ID is already stored in the cookie you might want to prevent adding it again, that is the reason for line 4. You can find the working example here: jsfiddle.
save an array and push id's to that array:
var ids = $.cookie('the_cookie') || [ ];
function saveLightbox(ID){
$.cookie('the_cookie', ids.push(ID), { expires: 7 });
console.debug(ids);
console.debug($.cookie('the_cookie'));
document.getElementById("result").innerHTML = JSON.stringify($.cookie('the_cookie'));
}
(can't test or demonstrate atm, jsfiddle is not available (for me).)
I have a store that fetches data from the zend server. I want to get the store records to do some customizations on my form. For getting data from store i am using the below code.
var index = Ext.StoreMgr.lookup('product.AttributeComboBox').find('abbr',4);
var reco = Ext.StoreMgr.lookup('product.AttributeComboBox').getAt(index);
Above snippet returns no records. Please let me know where i am wrong.
In your debugger check the store exists
Ext.StoreMgr.lookup('product.AttributeComboBox')
Check how many records are in the store
Ext.StoreMgr.lookup('product.AttributeComboBox').data.items
Check the records have parsed properly
What came from the server for the record
Ext.StoreMgr.lookup('product.AttributeComboBox').data.items[0].raw
How it get converted into the record
Ext.StoreMgr.lookup('product.AttributeComboBox').data.items[0].data
Can you show us more code ?
So far, seems ok but you will have to check if the store have been created and if it has all the records, just like RichH said.
To check if the Store exists I would do
var productStore = Ext.getStore('product.AttributeComboBox');
console.log(productStore );
To check if the store is loaded
console.log(productStore.getCount());
To find the record
console.log(productStore.findRecord('abbr','4'));