LocalStorage陣列

夥計們幫我用這段代碼。這個想法是保存一個字符串中的新輸入並使用HTML顯示它們。每次我添加一個新的HTML顯示它，如果我重新加載頁面項目仍然顯示和第一個getItem方法，如果我再次加載仍然工作，但這是問題。重新加載頁面後，我在字符串中插入一個新元素，然後它將顯示剛剛輸入的內容，並將刪除其他會話中的內容。LocalStorage陣列

如果我現在插入：「one」，「two」，「three」，我將顯示「一，二，三」，如果我重新加載它仍然會顯示「一，二，三」，這是好的，但如果我插入「四」後重新加載，它將只顯示「四」，我想顯示「一，二，三，四」。

我該如何做到這一點？

<!DOCTYPE html> 
<html> 
    <body> 
    <div id="result"></div> 
    <button onclick="reloadd()">Reload</button> 
    <button onclick="clearF()">Clear</button> 
    <input id="valoare"> 
    <button id="adauga" onclick="adauga()">+</button> 
    <button onclick="nrElemente()">ElemNr?</button> 
    <script> 
     var cars = []; 
     var two = "kes"; 

     document.getElementById("result").innerHTML = localStorage.getItem("array1"); 

     function clearF() { 
     window.localStorage.clear(); 
     location.reload(); 
     } 

     function adauga() { 
     var x = document.getElementById('valoare').value; 
     cars.push(x); 

     localStorage.setItem("array1", cars); 
     document.getElementById("result").innerHTML = localStorage.getItem("array1"); 
     } 

     function reloadd() { 
     location.reload(); 
     } 

     function nrElemente() { 
     alert(localStorage.length); 
     } 

    </script> 
    </body> 
</html>

來源

2016-10-01 S. Georgian

您的代碼不工作，因爲你沒有存儲陣列的任何地方。要保存數組localStorage你可以使用：

localStorage.setItem("cars", JSON.stringify(cars));

然後，而不是這樣做：

var cars = [];

你會加載您的車陣像這樣：

var cars = localStorage.getItem("cars"); 
cars = (cars) ? JSON.parse(cars) : [];

這是什麼做的是，它正在檢查localStorage對象是否包含名爲cars的array。現在如果是這樣，它將解析該字符串並返回存儲的汽車數組，如果不存在，它會將汽車數組設置爲一個新的空數組。

在這裏，我有固定和整理你的代碼：

<!DOCTYPE html> 
<html> 
<body> 
    <div id="result"></div> 
    <button onclick="reloadd()">Reload</button> 
    <button onclick="clearF()">Clear</button> 
    <input id="valoare" /> 
    <button id="adauga" onclick="adauga()">+</button> 
    <button onclick="nrElemente()">ElemNr?</button> 

    <script type="text/javascript"> 
    var array1 = localStorage.getItem("array1"); 
    array1 = (array1) ? JSON.parse(array1) : []; 

    var two = "kes"; 
    document.getElementById("result").innerHTML = localStorage.getItem("array1"); 

    function clearF() { 
     window.localStorage.clear(); 
     location.reload(); 
    } 
    function adauga() { 
     var x = document.getElementById("valoare").value; 
     array1.push(x); 
     localStorage.setItem("array1", JSON.stringify(array1)); 
     document.getElementById("result").innerHTML = localStorage.getItem("array1"); 
    } 
    function reloadd() { 
     location.reload(); 
    } 
    function nrElemente() { 
     alert(localStorage.length); 
    } 
    </script> 
</body> 
</html>

此外，它被認爲是不好的做法，把你的JavaScript事件&功能HTML屬性。嘗試通過將所有（或至少大部分）JS放置在腳本元素/ JS文件中儘可能地分離HTML，CSS & JS。

祝你好運，一切順利。

來源

2016-10-01 23:15:59

傢伙請測試您的代碼，因爲您的支持可能是有用的正確的，但在我的代碼沒有效果像..我改變了localStorage.setItem之後，你說你的代碼也var代碼，代碼只是沒有做任何事情 –

是的，這是感謝它的工作..但我怎麼能刪除方形剎車片？ –

你不會那些*「代表」你的陣列。這些*「方括號」*在使用'console.log（）;'或'alert（）;'時顯示。如果您想將JSON字符串轉換爲JavaScript對象，請使用'JSON.parse（）;'。如果我的答案幫助你不忘記投票並接受它，謝謝。 – 2016-10-01 23:29:50

你正在創建一個空數組每個頁面加載，當您添加到陣列您存儲，但從來沒有cars陣列連接到已存儲

數據試着改變

var cars =[];

到

var localData = localStorage.getItem("array1"); 
// if localData not undefined then parse that as cars array, otherwise is empty array 
var cars = localData ? JSON.parse(localData) : [];

當你去存儲cars陣列更改：

localStorage.setItem("array1",JSON.stringify(cars));

來源

2016-10-01 22:26:24 charlietfl

白衣這個代碼，我以後沒有結果「刷新」 –

嗯，這是一個很常見的模式...嘗試記錄'汽車'控制檯 – charlietfl

傢伙，你可以請給我一個鱈魚，做我想第一次做什麼嗎？保存輸入，不會丟失它們 –

有你的代碼中的一些重大問題，這是一個固定的版本：

<script type="text/javascript"> 
    var cars = []; 
    try { 
    cars = JSON.parse(localStorage.getItem("array1")); 
    } catch (err) {} 

    var two = "kes"; 
    document.getElementById("result").innerHTML = cars; 

    function clearF() { 
    window.localStorage.clear(); 
    location.reload(); 
    } 
    function adauga() { 
    var x = document.getElementById('valoare').value; 
    cars.push(x); 
    localStorage.setItem("array1", JSON.stringify(cars)); 
    document.getElementById("result").innerHTML = localStorage.getItem("array1"); 
    } 
    function reloadd() { 
    location.reload(); 
    } 
    function nrElemente() { 
    alert(localStorage.length); 
    } 
</script>

來源

2016-10-01 23:24:09 mauron85

LocalStorage陣列

回答

相關問題