這邊分享歡迎訊息顯示會員名用儲存在瀏覽器的 localStorage 方法。

(1)介紹 localStorage
HTML 5 出現後瀏覽器暫存有了 Local Storage 這個存放於本地端的儲存空間。存放在裡面的資料會一直存在，直到資料被清除才會消失。該儲存方式不建議存放隱私性的用戶等資料。尋找解決 Pinia store 錯誤訊息時發現 Local Storage ，試著將之應用到專案。分享給各位讀者。

使用 Local Storage 前先了解其以下缺點。內容參考五倍紅寶石・五倍學院。

• 瀏覽器無痕或隱私模式下無法讀取。
• 資料量太多，存取時容易造成畫面載入緩慢。
• 部分版本較舊的瀏覽器（ IE 8 以下）無法支援。

(1.1) localStorage 基本用法
介紹幾個 localStorage 的基本用法與說明。

• 讀取 Storage
  • 它能取得指定屬性（key）對應的值（value）；如果 localStorage 不存在指定屬性就會傳回 null ，反之則傳回其對應的值。

localStorage.getItem(key);

• 更新既有值 或 新增值 Storage
  • 如果指定的屬性（key）在 localStorage 已經存在，它會更新既有對應的值（value）；反之若不存在 localStorage 就會新增一筆屬性（key）和值（value）並儲存。

localStorage.setItem(key, value);

• 刪除 Storage
  • 刪除指定屬性（key）對應的值（value）。它只會刪除特定屬性與其對應的值，不會影響其他既有的屬性與值。

localStorage.removeItem(key);  

• 清除 Storage
  • 它不需要指定特定的屬性，而是直接清除整個 localStorage 本地端儲存的資料。

localStorage.clear();

應用上可以參考五倍紅寶石・五倍學院這篇文章，在一個簡易的登入畫面有做示範。

(2)會員登入頁面調用 localStorage
第4種寫法不用建立 Pinia store 所以不用新增前面兩篇的 LoginStore.js 檔案。

路徑 src / views / front / LoginView.vue 的 <script></script> ，表單通過驗證的這段語法， axios.get() 取得資料集後，可透過 localStorage.setItem("user-info",JSON.stringify(res.data)) 在 localStorage 建立屬性 user-info ，並將 axios.get() 的用戶資料（json 格式）用 JSON.stringify 轉換成 JavaScript 可讀取的型態來儲存值。語法如下。

<script>
...
export default {
    ...
  methods: {
    ...
    // 表單送出按鈕
    submitOrder() {
      // 使用 Vee Validate 的 validate 函式來驗證表單
      this.$refs.form.validate().then((valid) => {
        if (valid) {
          // 驗證通過，可以提交表單
          axios
            .get(
              `http://localhost:3000/user?email=${this.email}&password=${this.password}`
            )
            .then((res) => {
              ...
              // 法4(不用pinia store)
              localStorage.setItem("user-info",JSON.stringify(res.data))
              ...
            })
            .catch((error) => {
              ...
            });
        } else {
          ...
        }
      });
    },
  },
};
</script>

因為 json 格式只能儲存字串型態資料，需透過 JavaScript 處理 JSON 的兩個語法 JSON.parse 、 JSON.stringify 將資料轉換為陣列或字串後才能用。

附上 localStorage 存放的資料（從瀏覽器 chrome 滑鼠右鍵開發者工具，選擇列表上 application 頁籤後照著下面圖示點選 localStorage ）。

(3)會員主頁顯示會員名
路徑 src / components / MainView.vue 。

在 <script></script> 開頭不用引用 Pinia 和 store 。即不用寫以下語法。

import { mapState } from 'pinia';
import { useLoginStore } from "../../components/LoginStore.js";
或
import useLoginStore from "../../components/LoginStore.js";

調用 localStorage 寫法：
STEP1：data 中建立 userInfo 屬性（作為會員名）並預設其初始值 null 。
STEP2：會員主頁載入前先執行 created 內的語法。定義變數 userInfoString 來承接暫存在 localStorage 的 user-info 。更新 data 的 userInfo 屬性前先判斷 localStorage 裡是否有屬性 user-info 。

<script>
export default {
  // 法4(不用pinia store)
  data() {
    return {
      userInfo: null, // 先初始化定義為 null
      userInfoName: null, // 先初始化定義為 null
    };
  },
    
  // created 是初始化執行(html模板渲染之前)
  created() {
    const userInfoString = localStorage.getItem("user-info");
    // 檢查 user-info 是否存在，存在才執行
    if (userInfoString) {
      this.userInfo = JSON.parse(userInfoString);
      this.userInfoName=(this.userInfo[0]?.name);
      // 印出來看看
      // console.log(this.userInfoName);
    }
  },
  methods: {
    logout() {
      localStorage.clear();
    },
  },
};
</script>

STEP3：html 架構裡將登出選項增加 logout() 函式去清除整個 localStorage 本地端儲存的資料。再調整會員名 {{}} 的資料源。

<template>
  <div class="container">
    <ul class="nav main-nav mb-5">
      ...
      <li class="nav-item">
        <RouterLink to="/login" class="nav-link py-3 px-4" @click="logout"
          >登出</RouterLink>
      </li>
    </ul>
    <!-- 法4(不用pinia store) -->
    <p class="fs-4 fw-bold text-capitalize text-primary">
      歡迎華特會員 {{ userInfo && userInfoName }}
    </p>
    ...
  </div>
</template>