2016-11-24 5 views
1

У меня есть следующие упражнения вопроса, что я с трудом обертывание моей головы вокруг:Javascript: Создание списка покупок с помощью Web Storage

enter image description here

До сих пор я начал код от, как например:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title></title> 
 
\t <script> 
 
\t \t function addItem(){ 
 
\t \t \t var form = document.getElementById("form1"); 
 
\t \t \t var item = form.elements["name"].value; 
 
\t \t \t var cost = form.elements["price"].value; 
 
\t \t \t 
 
\t \t \t //what should I do next? 
 
\t \t } 
 
\t \t 
 
\t \t function removeItem(){ 
 
\t \t \t //remove item code here 
 
\t \t } 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <form id="form1"> 
 
\t \t Item Name: <input name="name" type="text"> 
 
\t \t Item Cost: <input name="price" type="text"> 
 
\t \t <button onclick="addItem()">Add</button> 
 
\t \t <button onclick="removeItem()">Remove</button> 
 
\t </form> 
 
\t <div id="div1"> 
 
\t \t <ul id="ul1"> 
 
\t \t </ul> 
 
\t </div> 
 
</body> 
 
</html>

у меня есть основная структура, как я хочу, чтобы моя страница в смотреть. Я знаю, что мне нужно будет создать две функции, которые будут обрабатывать элемент добавления и удалять критерии элемента в вопросе. Тем не менее, я как бы потерялся в момент, когда мне нужно сохранить вход пользователя. Я знаю, что мне нужно использовать веб-хранилище и, возможно, массив? Как это должно быть закодировано?

Поблагодарили бы за понимание. Заранее спасибо.

ответ

1
var testObject = { 'one': 1, 'two': 2, 'three': 3 }; 

// Put the object into storage 
localStorage.setItem('testObject', JSON.stringify(testObject)); 

// Retrieve the object from storage 
var retrievedObject = localStorage.getItem('testObject'); 

console.log('retrievedObject: ', JSON.parse(retrievedObject)); 

Источник: Storing Objects in HTML5 localStorage