ローカルストレージを保存する最も良い方法は？

-2

私はto doリストを開始しました。あなたがアイテムを提出するときにアイテムを追加しています。ローカルストレージを保存する最も良い方法は？

私はアイテムがブラウザに保存されているので、ページを更新する際に、今、ローカルストレージを追加します。

私の項目はクリックするだけで更新するので、私は明らかに私は、関数外の関数データを取得し、アイテムを保存するかどうかはわかりませんページが更新されるすべての回を保存する必要がありますが。

アイデア？あなたが読んでいましたそして、

localStorage.setItem('items', JSON.stringify(items));

ページのロードで：

乾杯

JSフィドル： https://jsfiddle.net/x1bj8mfp/

// When submit item 
var submit = document.getElementById('form'); 
submit.addEventListener('submit', addItem); 

var items = []; 

var itemValues = document.getElementById('items'); 
var listContainer = document.createElement('ul'); 
itemValues.appendChild(listContainer); 

// Add item 
function addItem(e) { 
    e.preventDefault(); 
    var item = this.querySelector('[name=item]'); 
    var itemValue = item.value; 
    items.push(itemValue); 
    item.value = ''; 

    // Output items 
    var listItems = document.createElement('li'); 
    listItems.innerHTML = itemValue; 
    listContainer.appendChild(listItems); 
}

出典

2017-02-18 Joe Consterdine

のためのいくつかの有用な例なぜあなたはそれを変更するたびにデータを保存することはできませんか？ – JJJ

しかし、アイテムを格納する配列は関数内にありませんか？たとえそれがあったとしても、なぜそれをlocalStorageに保存しないようにするのでしょうか？ –

このパッケージをチェックアウトするhttps://github.com/pamelafox/lscacheローカルストレージに最適 – MrFoh

アイテムを追加するたびにあなたがローカルストレージに配列全体を書くことができローカル記憶域から配列を取り出して変数に代入するか、ローカル記憶域に何もない場合は[]（現在のように）に設定しますこれらの項目を表示してください：

var items = JSON.parse(localStorage.getItem('items')) || []; 
items.forEach(function (itemValue) { 
    var listItems = document.createElement('li'); 
    listItems.textContent = itemValue; 
    listContainer.appendChild(listItems); 
});

このアップデートされたJSFiddleには、コードが含まれています。もちろん

、あなたはそうあなただけのリストを成長することができ、同様の項目を削除するには、いくつかの機能が必要になります。

出典

2017-02-18 11:00:39 trincot

はここにあなたのための完全なソリューションです。 corsとsandboxのため、コードスニペットはここでは機能しません。コードエディタに貼り付けます。ここで

var submit = document.getElementById('form'); 
 
submit.addEventListener('submit', addItem); 
 

 
var items = []; 
 

 
var itemValues = document.getElementById('items'); 
 
var listContainer = document.createElement('ul'); 
 
itemValues.appendChild(listContainer); 
 

 

 
//retrieve data after reload 
 
window.onload = function() { 
 
    if (localStorage.userData != undefined) { 
 
    var userData = JSON.parse(localStorage.getItem('userData')); 
 
    for (var i = 0; i < userData.length; i++) { 
 
     var listItems = document.createElement('li'); 
 
     listItems.innerHTML = userData[i]; 
 
     listContainer.appendChild(listItems); 
 
     items = userData; 
 
    } 
 
    } 
 
} 
 

 

 
// Add item 
 
function addItem(e) { 
 
    e.preventDefault(); 
 
    var item = this.querySelector('[name=item]'); 
 
    var itemValue = item.value; 
 
    items.push(itemValue); 
 
    item.value = ''; 
 

 
    // Output items 
 
    var listItems = document.createElement('li'); 
 
    listItems.innerHTML = itemValue; 
 
    listContainer.appendChild(listItems); 
 
    localStorage.setItem('userData', JSON.stringify(items)); 
 

 
}

<main> 
 
    <form id="form"> 
 
    <input class="form-input" type="text" name="item" placeholder="Add item"> 
 
    <input class="btn btn-block" type="submit" value="Submit"> 
 
    </form> 
 
    <div id="items"></div> 
 
    <div id="completed"></div> 
 
</main>

出典

2017-02-18 11:01:54

ローカルストレージ

function save() { 
 
    var fieldvalue = document.getElementById('save').value; 
 
    localStorage.setItem('text', fieldvalue); 
 
} 
 

 
function load() { 
 
    var storedvalue = localStorage.getItem('textfield'); 
 
    if (storedvalue) { 
 
    document.getElementById('textfield').value = storedvalue; 
 
    } 
 
} 
 

 
function remove() { 
 
    document.getElementById('textfield').value = ''; 
 
    localStorage.removeItem('textarea'); 
 
}

<body onload="load()"> 
 
    <input type="textarea" id="textfield"> 
 
    <input type="button" value="Save" id="save" onclick="save()"> 
 
    <input type="button" value="remove" id="remove" onclick="clr()"> 
 
</body> 
 
<!--save& run this in local to see local storage-->

出典

2017-02-18 11:02:04

ローカルストレージを保存する最も良い方法は？

答えて

関連する問題