JS-覆盖localStorage以监视更改并获取密钥/值

Question

我想覆盖window.localStorage，以便获取键、值和堆栈跟踪。我已经做到了：

Object.defineProperty(window, 'localStorage', new (function() {
this.get = async () => {
console.log(this);
};
})());

但我不知道如何才能获得已设置的密钥/值

Answer 1

从本地存储获取值：

let content = localStorage.getItem("INSERT_KEY")//you have to know the key to access the value 

要覆盖本地存储，只需删除项目：

localStorage.removeItem("SAME_KEY")

并重新设置值：

localStorage.setItem("SAME_KEY")

Answer 2

正如我在评论中提到的，您不能覆盖localStorage，因为当有人试图使用它时，它会导致错误。

有一个storage事件，但它只在同一域中的另一个页面上触发(例如，当您有同一页面的两个选项卡时(。它不会在同一个页面实例上启动，这已经更改了本地存储中的某些内容。

但是，您可以围绕localStorage编写一个包装器。

例如：

function setItemWrapper(callback) {
return (key, value) => {
localStorage.setItem(key, value)
callback(key, value)
}
}
function onSetItem(key, value) {
console.log(`Item set: ${key}=${value}`)
}
const setItem = setItemWrapper(onSetItem)
setItem('key', 'value')
console.log(localStorage.getItem('key'))

您可以在这个CodePen 中看到一个工作示例

确保打开CodePen 中的控制台框架