2024-12-11 輸入 text 及 textarea 要自動存入 localstorage

發表於 更新於 分類於 閱讀次數：
2024-12-11 輸入 text 及 textarea 要自動存入 localstorage

2024-12-11 輸入 text 及 textarea 要自動存入 localstorage

要在 text 和 textarea 中輸入時自動將內容儲存至 localStorage，並且右側顯示清單並在畫面載入時從 localStorage 中導入清單，可以按照以下方式進行：

主要步驟：

  1. 當用戶在 text 或 textarea 輸入內容時，自動將資料儲存到 localStorage。
  2. 在組件掛載時（onMounted），從 localStorage 中讀取清單並顯示。
  3. 在畫面上顯示清單，並將每個清單項目呈現出來。

完整範例：

JavaScript 部分：

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
<script>
import { ref, onMounted, onUnmounted } from 'vue';
import autosize from 'autosize';

export default {
  setup() {
    const title = ref(''); // 標題
    const note = ref(''); // 筆記
    const textarea = ref(null); // 參考textarea元素
    const notesList = ref([]); // 儲存所有筆記的清單

    // 初始化並導入localStorage中的清單
    onMounted(() => {
      if (textarea.value) {
        autosize(textarea.value);
      }

      // 從 localStorage 載入筆記清單
      const storedNotes = JSON.parse(localStorage.getItem('notesList')) || [];
      notesList.value = storedNotes;
    });

    // 清理資源
    onUnmounted(() => {
      if (textarea.value) {
        autosize.destroy(textarea.value);
      }
    });

    // 儲存筆記至 localStorage
    const saveToLocalStorage = () => {
      const newNote = {
        title: title.value,
        note: note.value,
      };
      
      notesList.value.push(newNote); // 新筆記加入清單
      localStorage.setItem('notesList', JSON.stringify(notesList.value)); // 更新 localStorage
    };

    // 建立新筆記
    const enableEditing = () => {
      title.value = ''; // 清空標題
      note.value = ''; // 清空筆記
    };

    return {
      title,
      note,
      textarea,
      notesList,
      enableEditing,
      saveToLocalStorage,
    };
  },
};
</script>

Template 部分：

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
<template>
  <p class="s_header">Notes</p>

  <div class="notes_container">
    <div class="inputBox">
      <input
        type="text"
        v-model="title"
        required
        spellcheck="false"
        @input="saveToLocalStorage"
      />
      <span class="labelline">標題</span>
    </div>
    <div class="inputBox">
      <textarea
        v-model="note"
        ref="textarea"
        spellcheck="false"
        required
        @input="saveToLocalStorage"
      ></textarea>
      <span class="labelline">筆記</span>
    </div>

    <div class="btn-container">
      <a href="#" class="btn" @click.prevent="enableEditing">建立新筆記</a>
    </div>

    <div class="notes-list">
      <p>筆記清單：</p>
      <ul>
        <li v-for="(noteItem, index) in notesList" :key="index">
          <strong>{{ noteItem.title }}</strong> - {{ noteItem.note }}
        </li>
      </ul>
    </div>

    <div class="footer">筆記應用程式</div>
  </div>
</template>

說明：

  1. 自動儲存筆記：

    • @input="saveToLocalStorage"：每當用戶在 input 或 textarea 中輸入時，就會觸發 saveToLocalStorage 函數，將當前的標題和筆記儲存到 localStorage 中。

  2. 載入清單：

    • onMounted：當組件掛載時，從 localStorage 讀取存儲的筆記清單，並更新 notesList。

  3. 筆記清單顯示：

    • 在模板中，使用 v-for 迴圈來顯示 notesList 中的每一筆筆記。每個筆記顯示其標題和內容。

  4. 建立新筆記：

    • 按下 “建立新筆記” 會清空 title 和 note 的內容，並允許用戶輸入新的筆記。

LocalStorage 流程：

  1. 當用戶在標題或筆記框中輸入時，saveToLocalStorage 函數會將新筆記存入 localStorage，並更新筆記清單。
  2. 當頁面重新載入時，onMounted 中的邏輯會從 localStorage 讀取筆記清單並顯示。

這樣一來，筆記就會自動儲存至 localStorage 並顯示在右側的清單中，並且畫面載入時會自動加載過去的資料。

為了達到你的需求，在這裡我們將進行兩個主要的修改：

  1. **等標題與筆記內容都輸入完畢後再儲存至 localStorage**：只有當 textarea 中的內容有變動時才儲存，並且使用標題作為 key 儲存，將筆記的內容作為 value。
  2. **當標題變更或筆記內容變更時，自動儲存更新到 localStorage**：筆記的內容會根據標題（key）自動存入。

完整範例

JavaScript 部分：

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
69
70
71
72
73
<script>
import { ref, onMounted, onUnmounted } from 'vue';
import autosize from 'autosize';

export default {
  setup() {
    const title = ref(''); // 標題
    const note = ref(''); // 筆記
    const textarea = ref(null); // 參考textarea元素
    const notesList = ref([]); // 儲存所有筆記的標題清單

    // 初始化並導入localStorage中的筆記
    onMounted(() => {
      if (textarea.value) {
        autosize(textarea.value);
      }

      // 從 localStorage 載入筆記標題清單
      const storedNotes = Object.keys(localStorage); // 取得所有localStorage的key，即所有標題
      notesList.value = storedNotes;
    });

    // 清理資源
    onUnmounted(() => {
      if (textarea.value) {
        autosize.destroy(textarea.value);
      }
    });

    // 儲存筆記至 localStorage
    const saveToLocalStorage = () => {
      if (title.value.trim() !== '' && note.value.trim() !== '') {
        // 只有當標題與筆記內容都有填寫時才儲存
        localStorage.setItem(title.value, note.value); // 用標題作為key，筆記內容作為value儲存
        // 更新筆記清單
        if (!notesList.value.includes(title.value)) {
          notesList.value.push(title.value); // 當筆記是新標題時，將標題加入清單
        }
      }
    };

    // 建立新筆記
    const enableEditing = () => {
      title.value = ''; // 清空標題
      note.value = ''; // 清空筆記
    };

    // 載入選中的筆記
    const loadNote = (selectedTitle) => {
      title.value = selectedTitle;
      note.value = localStorage.getItem(selectedTitle); // 從localStorage取出對應標題的內容
    };

    // 監控筆記的變動並自動儲存
    const updateNote = () => {
      if (title.value.trim() !== '') {
        saveToLocalStorage();
      }
    };

    return {
      title,
      note,
      textarea,
      notesList,
      enableEditing,
      saveToLocalStorage,
      loadNote,
      updateNote,
    };
  },
};
</script>

Template 部分：

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
<template>
  <p class="s_header">Notes</p>

  <div class="notes_container">
    <div class="inputBox">
      <input
        type="text"
        v-model="title"
        required
        spellcheck="false"
        @input="updateNote" <!-- 每次變動時儲存 -->
      />
      <span class="labelline">標題</span>
    </div>
    <div class="inputBox">
      <textarea
        v-model="note"
        ref="textarea"
        spellcheck="false"
        required
        @input="updateNote" <!-- 每次變動時儲存 -->
      ></textarea>
      <span class="labelline">筆記</span>
    </div>

    <div class="btn-container">
      <a href="#" class="btn" @click.prevent="enableEditing">建立新筆記</a>
    </div>

    <div class="notes-list">
      <p>筆記清單：</p>
      <ul>
        <li
          v-for="(noteTitle, index) in notesList"
          :key="index"
          @click="loadNote(noteTitle)"
        >
          {{ noteTitle }}
        </li>
      </ul>
    </div>

    <div class="footer">筆記應用程式</div>
  </div>
</template>

關鍵更改說明：

  1. **@input="updateNote"**：

    • 每次用戶修改標題或筆記內容時，updateNote 方法會被觸發。這個方法會呼叫 saveToLocalStorage() 來儲存最新的筆記。
    • 只有當標題（title）和筆記（note）都有內容時才會儲存，防止儲存空白內容。

  2. saveToLocalStorage 方法：

    • 當標題和筆記內容都不為空時，將標題作為 key，筆記內容作為 value 存儲到 localStorage。
    • 如果標題是新的，會將該標題加入筆記清單 notesList。

  3. 筆記清單顯示：

    • 當 localStorage 中有筆記時，會顯示筆記清單。
    • 當用戶點擊某一筆記標題時，會顯示對應的筆記內容。

  4. loadNote 方法：

    • 用來載入點選的筆記標題及其內容，將標題與內容顯示在相應的 input 和 textarea 中。

  5. enableEditing 方法：

    • 用於建立新筆記時清空標題與筆記內容。

效果預期：

  • 當用戶在 textarea 輸入筆記內容或在 input 輸入標題時，會即時儲存並更新到 localStorage。
  • 筆記標題與筆記內容會依照 title（標題）來存儲，並且只有當用戶輸入筆記內容時才會儲存。
  • 當頁面加載時，會自動顯示 localStorage 中的筆記清單，並且用戶可以點選來查看或編輯相應的筆記。

這樣，你的應用程式就可以根據標題作為 key 儲存每一條筆記，並且確保資料的更新和儲存。