1
2
3

<input class="text" type="text">
<button class="save" type="button">儲存資料</button>
<button class="call" type="button">呼叫資料</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

let text = document.querySelector(".text");
let save = document.querySelector(".save");
let call = document.querySelector(".call");

//點擊「儲存資料」按鈕
save.addEventListener("click",function(){

    //儲存資料，(要存入的值是什麼標題，存入什麼值)
    localStorage.setItem("myName",text.value);
})

//點擊「呼叫資料」按鈕
call.addEventListener("click",function(){

    //設定變數=localStorage的myName的值
    let str = localStorage.getItem("myName");

    //彈跳出資料
    alert(str);
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

let fruitsData = [
    {
        name: "蘋果",
        price: 15
    }
]

//存入"字串"資料
let fruitStr = JSON.stringify(fruitsData);
console.log(fruitStr); //"[{'name':'蘋果','price':15}]"
localStorage.setItem("fruitName",fruitStr);

//取出"字串"資料，並轉成JSON格式
let getData = localStorage.getItem("fruitName");
let fruitArr = JSON.parse(getData);
console.log(fruitArr[0].name); //"蘋果"

1
2
3

<input class="text" type="text">
<button class="btn">按鈕</button>
<ul class="list"></ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

let todoData = [];
let text = document.querySelector(".text");
let btn = document.querySelector(".btn");
let list = document.querySelector(".list");

//初始化資料
function initData(){
    //取得localStorage上的"todoItem"資料
    let getData = localStorage.getItem("todoItem");
    //如果有取得資料，就將"字串"資料轉為JSON格式
    if(getData){
      todoData = JSON.parse(getData);
    }else{
      todoData = [];
    }
}
initData();

//更新資料
function updateList(){
    //建立空字串
    let str = "";
    //將所有資料跑一遍
    for(let i=0 ; i<todoData.length ; i++){
        //並組成<li>並且在<a>連結裡面帶入data-num編號
        str += "<li><a href='#' data-num='"+i+"'>刪除</a>"+todoData[i]+"</li>";
    }
    //組裝完成後，渲染到頁面上
    list.innerHTML = str;
}
updateList();

//點擊"按鈕"時新增資料
btn.addEventListener("click",function(){
    //如果input裡有值才執行
    if(text.value.trim() !== ""){
        //將input裡的值新增到資料
        todoData.push(text.value);
        //將整個資料轉成"字串"
        let setData = JSON.stringify(todoData);
        //儲存到localStorage上
        localStorage.setItem("todoItem",setData);
        //重新渲染頁面的資料
        updateList();
        //清空input裡的值
        text.value = "";
    }
},false)

//點擊"刪除"時刪除資料
list.addEventListener("click",function(event){
    //當我點擊的是ul裡的a才執行
    if(event.target.nodeName == "A"){
        //取得我點擊目標的data-num編號
        let targetNum = e.target.dataset.num;
        //並從資料中刪除該項
        todoData.splice(targetNum,1);
        //將整個資料轉成"字串"
        let setData = JSON.stringify(todoData);
        //儲存到localStorage上
        localStorage.setItem("todoItem",setData);
        //重新渲染頁面的資料
        updateList();
    }
})