每次單擊按鈕時，如何防止程序覆蓋localStorage？

document.getElementById("submit").addEventListener("click", getElements) 

function getElements() { 

    var a = document.getElementById("sample").value; 
    var x = new obj(a); 

    function store() { 
    localStorage.setItem('todays-values', Object.values(x)); 
    } 

    store(); 
}

在一個單獨的js文件我然後調用每次單擊按鈕時，如何防止程序覆蓋localStorage？

localStorage.getItem('todays-values');

我得到的值，但如果我提出了新的投入我的HTML文件，然後點擊提交按鈕時，先前的值被覆蓋和替換新的。如何存儲提交的所有值並防止舊的值被替換？

我對Javascript非常陌生，所以我寧願在不使用任何其他庫的情況下解決此問題。

來源

2016-10-01 Alonishka

而不是覆蓋您的本地存儲項目，您應該將用戶值存儲在一個數組中。每次單擊提交按鈕時，您的腳本都應該獲取本地存儲項（它是一個數組），並將其附加到本地存儲項並重寫它。 – Terry

我已經考慮過了。儘管如此，如果你能發佈一個真正有用的例子，它還是無法實現。 – Alonishka

我添加了一個示例如何讀取和寫回到localStorage：[見我的答案]（http://stackoverflow.com/a/39812320/931485） –

第一：看來你是混合的JavaScript一類的函數（這裏有一個例子：What techniques can be used to define a class in JavaScript, and what are their trade-offs?）

例如，這就是等價類中的JavaScript：

function ClassName() { 
    var privateVar; 
    this.publicVar; 

    function privateFunction() {} 

    this.publicFunction = function() {}; 
}

你不應該在函數中包含一個函數，除非它具有含義（否則它會讓其他人感到困惑），但是在給定的例子中你並不需要它。另外，我看不到創建新對象的原因。x - 如果您在保存之前創建對象，則可以保存該值，因爲對象只包含sample的值，因此您可以編寫類似這樣的：

document.getElementById("submit").addEventListener("click", getElements); 

function storeElements() { 
    var sampleValue = document.getElementById("sample").value; 
    localStorage.setItem('todays-values', sampleValue);  
}

回到你的問題：

由於Kalamarico提到：如果你寫新值到todays-values將覆蓋舊的值，你可以簡單地加載從localStorage的所有舊值追加新的，並將它們寫回localStorage。

您還應該注意localStorage只接受字符串，所以您應該將對象串聯起來（請參閱localStorage.setItem）。

function appendValueToStorage(key, value) { 
    var values = JSON.parse(localStorage.getItem(key)); 
    if (values === null) { 
    values = []; 
    } 

    values.push(value); 
    localStorage.setItem(key, JSON.stringify(values)); 
    console.log(localStorage.getItem(key)); 
} 

appendValueToStorage('todays-values', document.getElementById("sample").value);

該功能可以讓你附加一些值，一鍵，你甚至可以重新包裝這個功能，可以使用它在你的點擊功能：

function onSubmitClick() { 
    appendValueToStorage('todays-values', document.getElementById("sample").value); 
} 

document.getElementById("submit").addEventListener("click", onSubmitClick);

隨着console.log命令，您可以查看localStorage的當前內容（您也可以使用開發人員工具進行檢查 - 我發現Chrome的工作效果最好，在應用程序 - >本地存儲選項卡下，您可以檢查您的頁面的localStorage）。

來源

2016-10-01 23:10:23

很好的解釋。非常感謝！ – Alonishka

@Alonishka請標記爲答案，如果這是你正在尋找;） –

您需要詳細瞭解localStorage，這是與HTML5一起推出的新功能，您可以看看here並查看所有功能。

localStorage將數據存儲爲JSON對象，如果您不知道什麼是JSON，則需要查找信息。在javascript認爲對象是這樣的：

var myData = { 
    myName: 'Kalamarico', 
    myAge: undefined 
};

這是一個JavaScript對象，JSON是非常相似的，它是對象的表示。 localStorage的API存儲你的數據，這樣，當你這樣做：

localStorage.setItem('todays-values', Object.values(x))

的localStorage保存新的條目，一鍵「今天值」和它的值是一個對象，因此，您的localStorage看來：

{ 
    "todays-values": { ... } 
}

每次設置「今天值」時，您都會覆蓋密鑰，因此，如果您可以保留舊值，則需要執行此操作，首先您可以在localstorage中獲取項目（if有），然後你可以「合併」你的舊價值和新價值。或者你可以設置一個新的密鑰，例如：「todays-values1」取決於你的需要。

來源

2016-10-01 22:13:34 Kalamarico

如果您需要每天只存儲一個鍵值對，那麼您可以在鍵字符串中添加日期。

否則怎麼樣編號鍵（「yourKey_0」，「yourKey_1」，......），還存儲在本地存儲的電流（最大）指數（「currentIndex」）：

function store(value) { 
    newIndex = localStorage.getItem("currentIndex") + 1; 
    localStorage.setItem("yourKey_" + newIndex, value); 
    localStorage.setItem("currentIndex", newIndex); 
}

如果您遇到存儲整數值的問題，轉換爲字符串。

來源

2016-10-01 22:31:11

我認爲這是一個真正的「哈克」解決方案，你可以'JSON.stringify'一個數組，並簡單地把它放到'localStorage'中，而不是將數組分割成塊，並給每個值一個不同的'key + index'命名並放入'localStorage'中。 –

@TobiasHelbich我同意，在大多數情況下（也可能是這種情況），您的解決方案會更好。然而在某些情況下，類似於我的解決方案的東西可能是實現它的方式。 –

每次單擊按鈕時，如何防止程序覆蓋localStorage？

回答

相關問題