Menu
Google Chrome records Web storage data in a SQLite file in the user's profile. The subfolder containing this file is " \AppData\Local\Google\Chrome\User Data\Default\Local Storage " on Windows, and " ~/Library/Application Support/Google/Chrome/Default/Local Storage " on macOS.
To listen to local storage value changes in React, we listen to the storage event. window. addEventListener("storage", (e) => { this. setState({ auth: true }); });
Many browser extensions store their data in the browser's so-called Local Storage, which is nothing else than a storage location managed by the web browser. And as the same suggests, all is saved locally on the machine where the browser is installed.
I need to be notified when localStorage is changed. This code works fine in Firefox 24, but doesn't work in Chrome 29 (or 30) or in IE 10. It also works on a live server, but not when I am testing using a local file (file:///).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
console.log('Clicked');
if($('#username').val() != "")
localStorage.setItem('someItem', 'someValue');
});
$(window).bind('storage', function(e) {
alert('change');
});
});
</script>
</head>
<body>
<input type="text" id="username" name="username" value="" />
<a href="#" id="submit">Click me</a>
<p id="result"></p>
</body>
</html>
What is the problem with this in Chrome? I'm opening two tabs as required.
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