javascript - How to detect when local storage is cleared - Stack Overflow

admin管理员组

文章数量:1410705

I have some values in the local storage added in page A. When I go page B the local storage should not be cleared, but it is. This is a programmatic error. However, I cannot track it correctly to know when this happens.

I tried just doing a setInterval to log in the console the value of my local storage each 1 second and I lose my values when I navigate out.

I wonder if there is a way to detect or tool to determine in what moment I clear my local storage like a call stack more than tracing breakpoints in the F12 dev tools. I did a Search (CTRL + SHIFT + F) to find localStorage.clear() but in my results the places that I clear the LS are not related and never reached.

I have some values in the local storage added in page A. When I go page B the local storage should not be cleared, but it is. This is a programmatic error. However, I cannot track it correctly to know when this happens.

I tried just doing a setInterval to log in the console the value of my local storage each 1 second and I lose my values when I navigate out.

I wonder if there is a way to detect or tool to determine in what moment I clear my local storage like a call stack more than tracing breakpoints in the F12 dev tools. I did a Search (CTRL + SHIFT + F) to find localStorage.clear() but in my results the places that I clear the LS are not related and never reached.

• javascript
• c#
• debugging
• visual-studio-2012
• local-storage

Share Follow asked May 2, 2017 at 21:19 Maximus DecimusMaximus Decimus 5,3112323 gold badges7070 silver badges9898 bronze badges 6

• 2 LocalStorage is separated by origin for security reasons, it is restricted by the same-origin policy. Page A and Page B should be in the same origin. – Ricky Ruiz Commented May 2, 2017 at 21:23
• @Ricky is correct, if this was possible it would be a big security flaw. – Alicia Sykes Commented May 2, 2017 at 21:38
• @Ricky both pages same context, same domain, same folder. – Maximus Decimus Commented May 2, 2017 at 21:54
• It is quite hard to help if you do not include the code where the Storage object is being manipulated. If the pages share the same origin (same domain and protocol), the data (keys -> values stored as strings) should persist. – Ricky Ruiz Commented May 2, 2017 at 22:11
• @Ricky, Agree! the LS should be persisted. That's why I called it a programmatic error. I am trying to find the issue to fix it, but the code is enormous that's why I cannot paste it and I wonder if there's a way to track the LS all the moment or a tool that sniffs the local storage. I wonder. – Maximus Decimus Commented May 2, 2017 at 22:17

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

You can try using the storage event.

The storage event is fired when a storage area (localStorage or sessionStorage) has been modified.

Example:

window.addEventListener('storage', function(e) {
  //console.log(e.key, e.oldValue,e.newValue, e.url, e.storageArea);
});

Important:

This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made.

Since this event will only be triggered if the Storage object is changed in another page within the same origin, we'll have to add the event listener in Page B and change the Storage object in Page A.

Since the document is sandboxed in stack snippets, we'll have to use jsfiddle.

Page B

Page A

---

How to run the example:

1. Open both pages.
2. Go to Page A and run the fiddle.
3. Check Page B result.

---

After running it for the first time, you'll have to change any value of a Storage key with localStorage.setItem() in Page A to trigger the event again.

本文标签： javascriptHow to detect when local storage is clearedStack Overflow