2016-11-24 31 views
1

創建購物清單我有我有一個很難下面的練習問題纏繞我的頭圍:的Javascript:使用Web存儲

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