CODEWITHSUNDEEP
javascriptgoogle-chromelocal-storage
Samuel Harmer
Samuel Harmer

Reputation: 4412

Why isn't localStorage persisting in Chrome?

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)

Upvotes: 20

Views: 35186

Answers (2)

cmeza
cmeza

Reputation: 369

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.

Upvotes: 13

Samuel Harmer
Samuel Harmer

Reputation: 4412

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.

Upvotes: 13

Related Questions