I'm trying to learn how to use the localStorage js object with the following code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function saveStuff() {
sessionStorage.setItem('sessionKey', 'sessionValue');
localStorage.setItem('localKey', 'localValue');
}
</script>
</head>
<body>
<button type="button" onclick="saveStuff()">Save</button>
</body>
</html>
I am aware this doesn't always work with file:/// so I'm using mongoose to serve it up. When I click the save button, the results look correct to me in Chrome's JavaScript console. However when I press refresh both the local and the session storage get cleared where I was expecting the local storage value to persist. This happens on both http://127.0.0.1/ and http://localhost/.
Does anyone know why this might be happening? In Settings, Content Settings I have selected 'Allow local data to be set (recommended)' and unticked 'Block third-party cookies and site data'. Am I missing something in my code?
(Chrome Version 23.0.1271.64 m)
localStorage is similar to sessionStorage , except that while localStorage data has no expiration time, sessionStorage data gets cleared when the page session ends — that is, when the page is closed.
LocalStorage has no expiration time, Data in the LocalStorage persist till the user manually delete it.
Local storage persists in different tabs/windows when using the same browser on the same machine. It does not persisted across a domain.
Ok. Thanks must go to pimvdb on this one but here's the solution.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function saveStuff() {
sessionStorage.setItem('sessionKey', 'sessionValue');
localStorage.setItem('localKey', 'localValue');
}
localStorage.getItem('localKey');
sessionStorage.getItem('sessionKey');
</script>
</head>
<body>
<button type="button" onclick="saveStuff()">Save</button>
</body>
</html>
Summary seems to be that that you must attempt a read of the key in order to persist it.
Conclusion: WTF.
<!-- Necro post I know, but maybe it helps someone else -->
I couldn't figure out why I couldn't see something in my localStorage in Dev Tools, but could see it in the console when typing localStorage. Well, if you store something with Dev Tools open, you won't see Application -> Local Storage have anything listed for your host. When I closed/reopened Dev Tools, I could see my data.
So, in conclusion, close/reopen Dev Tools.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With