save 將本地存儲恢復到本地文件

Question

有沒有辦法方便的將本地存儲保存和恢復到jquery或JavaScript中的一個文件中？

有 3 種情況：

1. 使用特定的本地存儲進行測試

2. 在某些數據很重要的特定情況下備份本地存儲（我們希望保存以防本地緩存被刪除）

3. 從現有的本地存儲設置另一個瀏覽器。

Answer 1

我可能只是將其作為對納撒尼爾約翰遜答案的評論，但我還沒有聲譽！ 關於這些方法，這里有一些更簡單的他的功能版本：

function getLocalStorage() {
    return JSON.stringify(localStorage)
}

function writeLocalStorage(data) {
    Object.keys(data).forEach(function(key) { localStorage.setItem(key, data[key])})
}

Answer 2

保存和檢索本地存儲的過程有兩個部分。

首先，您必須能夠以 javascript 可管理的形式檢索本地存儲的內容。 由於本地存儲是鍵值對的映射，因此最簡單的方法是將本地存儲轉換為 javascript 對象。 然后把這個對象變成一個 JSON 字符串。 你如何處理這個字符串取決於你，但我發現讓用戶將字符串復制到電子郵件中是最簡單的。

function getLocalStorage() {
    var a = {};
    for (var i = 0; i < localStorage.length; i++) {
        var k = localStorage.key(i);
        var v = localStorage.getItem(k);
        a[k] = v;
    }
    var s = JSON.stringify(a);
    return s;
}

當我得到字符串時，我使用以下函數將我的本地存儲轉換為他們本地存儲的副本。 請記住在通過調用localStorage.clear()復制數據之前擦除本地存儲

function writeLocalStorage(data) {
    var o = JSON.parse(data);
    for (var property in o) {
        if (o.hasOwnProperty(property)) {
            localStorage.setItem(property, o[property]);
        }
    }
}

您問題的最后一部分是如何保護數據不被覆蓋。 您不能寫入本地文件，但是，您可以將數據復制到<textarea>並告訴用戶如何將數據復制並粘貼到電子郵件或更直接的方法中。

Answer 3

下面的這個javascript對我有用：

function getLocalstorageToFile(fileName) {
  
  /* dump local storage to string */
  
  var a = {};
  for (var i = 0; i < localStorage.length; i++) {
    var k = localStorage.key(i);
    var v = localStorage.getItem(k);
    a[k] = v;
  }
  
  /* save as blob */
  
  var textToSave = JSON.stringify(a)
  var textToSaveAsBlob = new Blob([textToSave], {
    type: "text/plain"
  });
  var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
  
  /* download without button hack */
  
  var downloadLink = document.createElement("a");
  downloadLink.download = fileName;
  downloadLink.innerHTML = "Download File";
  downloadLink.href = textToSaveAsURL;
  downloadLink.onclick = function () {
    document.body.removeChild(event.target);
  };
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
}

Answer 4

在 Chrome 中創建兩個書簽，名稱如LS BACKUP和LS RESTORE

將這兩個片段相應地放入 URL 中

javascript:!function(e){var o=document.createElement("textarea"),t=document.getSelection();o.textContent=e,document.body.appendChild(o),t.removeAllRanges(),o.select(),document.execCommand("copy"),t.removeAllRanges(),document.body.removeChild(o)}(JSON.stringify(localStorage)),alert("Local storage is copied to clipboard");

javascript:!function(){let t=prompt("Input local storage backup string");try{t=JSON.parse(t),Object.keys(t).forEach(r=>{try{localStorage.setItem(r,t[r])}catch(a){alert(`Error occurred with the key "${r}" and value "${t[r]}"`)}})}catch(t){alert("Input is not a valid JSON string")}}();

第一個會將 JSON 字符串復制到剪貼板。

第二個將提示您插入一個 JSON 字符串，該字符串將被解析並放入本地存儲。