Лучший способ хранения локального хранилища?

-2

Я запустил список дел. У меня есть добавление элемента при отправке элемента.Лучший способ хранения локального хранилища?

Я хочу добавить локальное хранилище при обновлении страницы, чтобы элементы сохранялись в браузере.

Мне явно нужно сохранять все время, когда страница обновляется, но поскольку мои элементы обновляются только по клику, я не уверен, как захватить эти данные функции вне функции и сохранить элементы.

Любые идеи?

Приветствия

JS Fiddle: 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

Вы могли бы написать весь массив в локальном хранилище при добавлении элемента:

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

Тогда на странице загрузки вы читали из локального хранилища массива и присвойте его обратно вашей переменной или установите его на [] (как сейчас), если ничего не найдено в локальном хранилище е, а затем отобразить эти пункты:

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

Вот полное решение для вас. Обратите внимание, что фрагмент кода не будет работать здесь, из-за корса и песочницы. Просто вставьте его в свой редактор кода.

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

Лучший способ хранения локального хранилища?

ответ

Смежные вопросы