无法执行“setItem”在“Storage”上：设置“state”的值；超出配额（localStorage.clear() 不起作用）

Question

在我的 React 项目中，我使用 Redux 保存序列化状态：

const saveState = (state: any) => {
    try {
        const serializedState = JSON.stringify(state);

        localStorage.removeItem('state');
        localStorage.clear();
        localStorage.setItem('state', serializedState);

    } catch (e) {
        console.log(e);
        let _lsTotal = 0, _xLen, _x; for (_x in localStorage) { if (!localStorage.hasOwnProperty(_x)) { continue; } _xLen = ((localStorage[_x].length + _x.length) * 2); _lsTotal += _xLen; console.log(_x.substr(0, 50) + " = " + (_xLen / 1024).toFixed(2) + " KB") }; console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");
    }};

由于我遇到“设置‘状态’的值超出配额”错误，我尝试清除本地存储（见上文）。但我仍然收到此错误，并且 catch 部分中的代码显示 0.00KB 的存储：

DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'state' exceeded the quota.
at saveState (http://localhost:xxxx/static/js/main.chunk.js:16322:18)
at http://localhost:xxxx/static/js/main.chunk.js:16350:5
at invokeFunc (http://localhost:xxxx/static/js/1.chunk.js:276358:19)
at trailingEdge (http://localhost:xxxx/static/js/1.chunk.js:276403:14)
at timerExpired (http://localhost:xxxx/static/js/1.chunk.js:276391:14)
Store.ts:1967 Total = 0.00 KB

如何避免此错误？

Answer 1

如何避免这个错误？

不要将巨大对象放入状态。根据评论，您的对象看起来有 6006565 长。这是很多位！