谷歌浏览器监视localstorage改变

当我们在使用谷歌浏览器的开发者工具时，可以使用“Application”选项卡来监视和管理网站的localstorage。具体操作步骤如下：

1. 打开开发者工具，选择“Application”选项卡。
2. 在左侧的“Storage”面板中，可以看到localstorage的相关信息，包括键值对、大小和过期时间等。
3. 在右侧的“Event Listener Breakpoints”面板中，勾选“Storage”下的“DOM Storage”，然后点击“Subtree modifications”即可在localstorage发生改变时暂停代码执行，方便调试。

此外，我们还可以在控制台输入以下代码来监听localstorage的改变：

window.addEventListener('storage', function(event) {
    console.log('localstorage changed', event);
});

这段代码会在localstorage发生改变时打印相关信息到控制台。

相关问题

谷歌浏览器查看localStorage使用大小

您可以通过开发者工具来查看谷歌浏览器中 localStorage 的使用大小。

首先，打开谷歌浏览器并打开您想要检查的网页。然后按下键盘上的 F12 键，或者右键点击页面并选择“检查”选项，打开开发者工具。

在开发者工具中，切换到“应用程序”选项卡。在左侧导航栏中，您将看到一个名为“存储”或“Application”的选项。点击它以展开更多子选项。

在子选项列表中，您将看到一个名为“LocalStorage”的选项。点击它以查看当前网页使用的 localStorage。

在右侧的窗格中，您将看到 localStorage 的详细信息，包括每个键和对应的值。在顶部，您可以看到已使用的存储空间大小和总存储空间大小。

通过查看已使用的存储空间大小，您可以得知当前网页使用的 localStorage 的大小。

请注意，这种方法只能查看特定网页使用的 localStorage 大小，而不是整个浏览器中的总大小。

谷歌浏览器localStorage.setItem 可不可以写入数组

可以写入数组。localStorage.setItem()可以将任何JavaScript数据类型（字符串、数字、布尔值、对象、数组等）存储在本地存储中。如果需要将数组存储在本地存储中，可以将其转换为JSON字符串，然后使用localStorage.setItem()将其存储。例如：

const myArray = [1, 2, 3];
localStorage.setItem('myArray', JSON.stringify(myArray));

在读取时，可以使用localStorage.getItem()将JSON字符串转换回原始数组：

const storedArray = JSON.parse(localStorage.getItem('myArray'));
console.log(storedArray); // [1, 2, 3]