I am creating a shopping cart.
Basically, when I reload the page with the products in my cart, the local storage doesn't refresh, which is what I want.
But I also want it to refresh at some point only (when I open another page). How do I get the local storage to refresh completly?
localStorage.clear()
The clear() method of the Storage interface clears all keys stored in a given Storage object.
for example
//feeds storage
localStorage.setItem('foo', 'bar');
localStorage.setItem('john', 'wick');
localStorage.setItem('joe', 'doe');
//lets get the value bar from the localStorage
console.log(localStorage.getItem('foo'))//outputs 'bar'
//clears all data
localStorage.clear();
//now if you try to do it again after you clear it will print null
console.log(localStorage.getItem('foo'))//outputs null
You can use session storage if you want to delete data anytime user closes the tab, localStorage does not refresh on page refresh or anything like that, what you have to do is use setItem on same key you were using before and pass new or updated data(data you want to change)
localStorage.setItem("same-object-key-you-have-used-before",data);
by doing this data(updated one) will be stored in localStorage
Related
I have below scenario
Page 1 has a link, when user clicks on it, it gets navigated to portal page with page reload. So just before navigation, a JSON object is created
The size of this object comes around 4KB roughly.
Sample object
let obj = {
"date":"12/31/2018",
"year":"2019",
"zip":"93252",
"members":[
{
"sdf":true,
"age":21,
"fdssss":false,
"aaaa":false,
"fdss":null,
"fsdfsd":[
"ADULT"
]
},
{
"sdf":true,
"age":21,
"fdssss":false,
"aaaa":false,
"fdss":null,
"fsdfsd":[
"ADULT"
]
}
}
There is a back link from that portal page, on clicking page will be navigated back to Page 1 with a page reload.
So when the page is navigated back, I need the created JSON object back again. I need it only for that session or the data should be persistent even if the page is reloaded.
Do I have to use localStorage? If i store the object in localStorage, at what point i should clear the storage? How should I handle between different users?
Do I have to use sessionStorage? what will be the scope of the data availability
I'm using AWS service.
Q1:
you can have localStorage, and you should handle it at the code when first page loaded and you can delete it when user do signout or login, storage is about browser not user, if there are some users behind one computer at different times you must clear all data manually.
Q2:
you can also have sessionStorage, per tab and will be removed by closing browser.
in details:
This is depends on your scenario which means localStorage used for long time but sessionStorage used when you need to store something temporary.
but the important thing about sessionStorage is that it is exist per tab if you close tab and windows the sessionStorage completely removed, it used for critical data such as username and password whereas localStorage is used to shared data whole the browser.
localStorage has no expiration date, and it gets cleared only by code, or clearing the browser cache or locally stored data whereas sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
at the end I suggest you to use localStorage because you may want to share that data whole the browser event after closing browser and you can store more data, in the other side there are limitation about them, when you are used storage you should handle them manually and take care.
suppose:
function removeStorage()
{
var obj = localStorage.getItem('obj');
if(obj !== null)
localStorage.removeItem('obj')
}
and in login or logout success action call removeStorage() and in Page1 load have something like below:
var obj = localStorage.getItem('obj');
if(obj !== null)
{
....
//show the obj in label or do what you want with it
...
}
Anyone provide me way, I can use HTML5 LocalStorage to use in Javascript to maintain session between server and client to keep track of session Timeout which will redirect the all tabs or pages in session Expired page.
Is there any way(Other than this) i can maintain session across the page/tabs under same domain to keep track of Session Timeout.
Thanks in Advance
You have not posted any code so the only think I can do for you is just show you a generic example which may not completely suit your requirement but will give an idea on how you could do it:
// show last settings pane if it's set
if ( localStorage.activePill ) {
$('.nav-pill-control > li').removeClass('active');
$('.nav-pill-control > li > a[href="' + localStorage.activePill + '"]').parent().addClass('active');
$('.nav-pill-pane').hide();
$(localStorage.activePill).show();
}
The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.
In HTML5 you can use session to pass object from page to another:
// 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')
More Information
i have some problem, I'm creating apps for commerce, and the cart is work, but when I'm reloading the pages, the session is gone, cart, and other.
here's my code
//show product page
$scope.showProductInfo=function (id,desc,img,name,price) {
sessionStorage.setItem('product_info_id', id);
sessionStorage.setItem('product_info_desc', desc);
sessionStorage.setItem('product_info_img', img);
sessionStorage.setItem('product_info_name', name);
sessionStorage.setItem('product_info_price', price);
window.location.href = "/#/page8";
};
//add to cart function
$scope.addToCart=function(id,image,name,price){
cart.add(id,image,name,price,1);
};
how can i save the data to session or cookies, like php did, so if the reloading page, the session not destroying/ session_destroy();
hope somebody care enough to help me
Move cart management into service - so you will get same data from any controller.
When service is initialized - try to load from local storage (if not - create empty cart)
Any change of cart must update localstorage
i am trying to store the value of selected radio button in session storage in JavaScript.And later i want that value to be used in angularjs function .Is it possible.If yes then please help me
Yes you can make use of localStorage of the browser
window.localStorage - stores data with no expiration date
code.sessionStorage - stores data for one session (data is lost when the tab is closed)
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
In AngularJS, you can make use of Angular-local-storage
JSFiddle
Let's say I have two or more tabs with a couple of inputs and textareas.
Users can fill these fields and switch tabs but I want to make sure they don't lose the data in the fields.
Here comes the question: how would you save the data when the users switch between tabs?
Now I solved this problem by storing the data in variables, specifically in object literal (Javascript), but it is such a mechanical way to do it.
Of course I could push the data in a database.
I am using Javascript plus jQuery. I would really like to think of a good way to solve this kind of problem.
You can use localStorage.
Just set the values you want to store by:
localStorage.setItem(key, stringData);
To get the data:
var stringData = localStorage.getItem(key);
To delete:
localStorage.removeItem(key);
That way the data is stored locally in the user's browser. User can also come back later and data will still be there.
You can synchronize the tabs by listening the storage event:
window.addEventListener('storage', updateStorage, false);
function updateStorage(e) {
if (e.newValue === null) {
localStorage.removeItem(e.key);
} else {
localStorage.setItem(e.key, e.newValue);
}
}
The storageevent is only throw to the inactive tabs so they can update the isolated copy of the localStorage.
If you only need to store the data for a session you can use sessionStorage instead.
For more on localStorage:
http://www.w3.org/TR/2013/PR-webstorage-20130409/