如何显示所有 localStorage 保存的变量？

Posted 2023-03-05

【中文标题】如何显示所有 localStorage 保存的变量？

【英文标题】：How can I show all the localStorage saved variables?

【发布时间】：2011-07-21 14:46:30

【问题描述】：

我想访问保存在特定页面上的所有 localStorage 变量。我怎么做？我想显示它，就像显示带有 join() 函数的数组一样

【问题讨论】：

另见：Get html5 localStorage keys

【参考方案1】：

我将script by Cryptopat 改进为可以复制+粘贴，并且可以同时使用localStorage 和sessionStorage。这很方便在另一台机器上以 1:1 的比例重现完整存储。

在 Chrome 74.0.3729.131 上测试。

function dump(storage) 
    let store = []
    for (let i = 0, l = storage.length; i < l; i++) 
        let key = storage.key(i);
        store.push( key: key, value: storage.getItem(key) );
    
    console.log(JSON.stringify(store))


function restore(storage, store, clearBefore) 
    if (clearBefore) 
        storage.clear();
    

    for (let i = 0, l = store.length; i < l; i++) 
        let item = store[i];
        storage.setItem(item.key, item.value);
    


// usage:
// 
// dump(localStorage); // manual step: copy log output to text file
// dump(sessionStorage);
//
// let contentsFromTextFile = [ ... ]; // manual step: paste from text file
// restore(localStorage, contentsFromTextFile, true);
// restore(sessionStorage, contentsFromTextFile, true);
//
//
// EXAMPLE
// -------
// Given localStorage has one entry with key "foo" and value "bar"
// And I pasted the above code into the console
//
// When I run
//    dump(localStorage)
// Then I see the log output
//    ["key":"foo","value":"bar"]
//
// When I run
//    restore(localStorage, ["key":"foo2","value":"bar2"], true);
// Then localStorage contains only one entry with key "foo2" and value "bar2"
//
// When I run
//    restore(localStorage, ["key":"foo3","value":"bar3"], false);
// Then localStorage contains two entries,
//   one entry with key "foo2" and value "bar2" and
//   one entry with key "foo3" and value "bar3"

【参考方案2】：

为了扩展这一点，以下内容检索 localStorage 中的所有内容。

不管条目的类型是什么，对象、数组，或者只是一个值。

然后把所有东西写好。

有助于保存/导出/恢复任何给定的配置！

function getLocalItems(k)
  if (k)
    try
      return JSON.parse(localStorage.getItem(k))
      catch(e)
       return localStorage.getItem(k)
    
  


function setLocalItems(k, value)
  if (typeof value === 'object') 
    value = JSON.stringify(value)
  
  localStorage.setItem(k, value)


// Put all entries in an object «store»
let store = 
for (let i = 0, l = localStorage.length; i < l; i++) 
  store[localStorage.key(i)] = getLocalItems(localStorage.key(i))

console.log(store)

// Write all keys of «store» in localStorage
for (let o in store) 
  setLocalItems(o, store[o])

然后您可以将此 «store» 对象发送到您的服务器，以便在登录后进行备份/恢复。

经过实验，在大量使用 localStorage 的情况下，最好在脚本中使用这个 «store» 对象，这样可以将所有值保存在内存中以便更快地进行 i/o 访问，因为磁盘上没有硬写入.

无论哪种方式，localStorage 都非常强大，我们可以制作复杂的东西。以一种在 localStorage 密钥丢失或损坏时脚本不会失败的方式使用它。

允许用户通过按钮或在注销后自动清除所有本地配置，也是一个好主意！

【参考方案3】：

控制台记录localStorage。很简单。

console.log(localStorage);

【参考方案4】：

从这个页面得到提示，我现在正在使用这个：

new Array(localStorage.length)
  .fill()
  .map(i => localStorage.key(i));

谢谢大家！

【参考方案5】：

for(var i in localStorage) 
    console.log(i + ' = ' + localStorage[i]);

【参考方案6】：

我经常使用这段代码：

var i;

console.log("local storage");
for (i = 0; i < localStorage.length; i++)   
    console.log(localStorage.key(i) + "=[" + localStorage.getItem(localStorage.key(i)) + "]");


console.log("session storage");
for (i = 0; i < sessionStorage.length; i++) 
    console.log(sessionStorage.key(i) + "=[" + sessionStorage.getItem(sessionStorage.key(i)) + "]");

【参考方案7】：

您还可以直接在 Google chrome 开发者工具中查看本地存储状态和数据

【参考方案8】：

您可以尝试遍历 localStorage 对象中的所有项目：

for (var i = 0; i < localStorage.length; i++)
    // do something with localStorage.getItem(localStorage.key(i));

【讨论】：

我觉得应该提一下，你可以通过localStorage.key(i)

获取i的键名

也许对某人有用- 请注意，在它里面你不能从存储中removeItem，因为那样localStorage.length 会减少，所以for 会比你想要的更快逃脱。如果要从 localStorage 中删除项目，请记住在 for 循环之前缓存长度并从末尾循环。

为了更好的性能，循环应该是：for (var i = 0, l = localStorage.length; i<l; ...

@DmitriZaitsev 没什么区别，大多数浏览器缓存 localStorage.length 所以他们不必每次都计算它

@user3576887 任何信息链接这种缓存是如何工作的？