1
2
3
4
5
6

/** 存入資料 **/
localStorage.setItem("a","蘋果");

/** 取出資料 **/
let a = localStorage.getItem("a");
console.log(a);  //蘋果

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

// <-----html----->
input(type="text")
button.setBtn 儲存資料
button.getBtn 顯示資料

// <-----js----->
let input = document.querySelector("input");
let setBtn = document.querySelector(".setBtn");
let getBtn = document.querySelector(".getBtn");

setBtn.addEventListener("click",function(){
  let inputVal = input.value;
  localStorage.setItem("a",inputVal);
  input.value = "";
});

getBtn.addEventListener("click",function(){
  let a = localStorage.getItem("a");
  console.log(a);  //顯示儲存的資料
});

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

// <-----js----->
let fruits=[
  {
    name: "蘋果",
    amount: 100,
    prod:["美國","日本"] 
  },
  {
    name: "香蕉",
    amount: 300,
    prod:["台灣","泰國"] 
  },
  {
    name: "鳳梨",
    amount: 500,
    prod:["夏威夷","新加玻"] 
  },
];

let fruitsStr = JSON.stringify(fruits);
localStorage.setItem("fruitsData",fruitsStr);
let getData = localStorage.getItem("fruitsData");
let fruitsData = JSON.parse(getData);
console.log(fruitsData[0].name);  //蘋果

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

// <-----html----->
ul
 li(data-num="0") 蘋果
 li(data-num="1") 香蕉
 li(data-num="2") 鳳梨

// <-----js----->
let ul = document.querySelector("ul");

ul.addEventListener("click",function(event){
  let targetNum = event.target.dataset.num;
  console.log(targetNum);
});

// <-----結果----->
//點擊<li>可以顯示對應的資料名稱

 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

// <-----html----->
ul

// <-----js----->
let fruits=[
  {
    name: "蘋果",
    amount: 100,
    prod:["美國","日本"] 
  },
  {
    name: "香蕉",
    amount: 300,
    prod:["台灣","泰國"] 
  },
  {
    name: "鳳梨",
    amount: 500,
    prod:["夏威夷","新加玻"] 
  },
];

let ul = document.querySelector("ul");
let str = "";

for(let i=0 ; i<fruits.length ; i++){
  str += `<li data-num="${i}">${fruits[i].name}</li>`
  ul.innerHTML = str;
}

ul.addEventListener("click",function(event){
  let targetNum = event.target.dataset.num;
  console.log(targetNum);
});

// <-----結果----->
//點擊<li>可以顯示對應的資料名稱

 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
66
67
68

// <-----html----->
input(type="text")
button 送出
ul

// <-----js----->
let todolist = [];
let input = document.querySelector("input");
let button = document.querySelector("button");
let ul = document.querySelector("ul");

/** 載入頁面時，顯示資料 **/
function initTodo() {
  let getData = localStorage.getItem("todoData");
  todolist = JSON.parse(getData) || [];
  //將[陣列]賦予localStorage上的資料
  //若沒資料就賦予空[陣列]
  showTodo();
}
initTodo();

/** 顯示資料 **/
function showTodo() {
  let str = "";
  for (let i = 0; i < todolist.length; i++) {
    str += `<li><a href="#" data-num="${i}">刪除</a>${todolist[i]}</li>`;
    //將取得的資料，帶入編號、"刪除"
    ul.innerHTML = str;
    //顯示在清單上
  }
}

/** 點擊按鈕，新增資料 **/
function addTodo() {
  let inputVal = input.value;
  //取得輸入框的值
  if (inputVal) {
    todolist.push(inputVal);
    //將取得的值，新增到[陣列]
    let todoStr = JSON.stringify(todolist);
    localStorage.setItem("todoData", todoStr);
    //將新增後的[陣列]上傳localStorage
    showTodo();
    input.value = "";
    //清空輸入框
  }
}
button.addEventListener("click", addTodo);

/** 刪除資料 **/
function removeTodo(event) {
  let targetTag = event.target.tagName;
  //取得點擊的目標
  if (targetTag === "A") {
    let targetNum = event.target.dataset.num;
    //取得目標的編號
    todolist.splice(targetNum, 1);
    //將該項目清除
    let todoStr = JSON.stringify(todolist);
    localStorage.setItem("todoData", todoStr);
    //將清除後的[陣列]，上傳localStorage
    ul.innerHTML = "";
    //因為刪除後資料的編號會與localStorage上的編號不同
    //所以必須清除掉所有清單上的內容全部重新渲染過
    showTodo();
  }
}
ul.addEventListener("click", removeTodo);