在 Nuxt 重新包裝 cookie 與 localStorage 等方法

在開發網頁時，或多或少會用到 localStorage 的方法去存取資料，在取得物件時，需做一些 JSON 的轉換，便能將資料取出

localStorage.setItem('data', JSON.stringify({ name: 'bobee' }));
console.log(JSON.parse(localStorage.getItem('data')));

但每次都要這樣轉換其實有點麻煩，如果有很多地方都要使用這個方法，就必須寫一堆 JSON.stringify、JSON.parse，為了更方便使用，可以將方法包裝，供全站使用。

包裝 localStorage

新增 localStorage.js，自行注入 localStorage 方法

plugins/localStorage.js

export default ({ app }, inject) => {
  inject('localStorage', {
    // 設定 key
    set(key = '', val = {}) {
      localStorage.setItem(key, JSON.stringify(val));
    },
    // 取得 key
    get(key = '') {
      const obj = JSON.parse(localStorage.getItem(key));
      // 如果 obj 沒有東西，回傳空物件，此寫法在程式上會比較好判斷，也可減少錯誤發生
      if (!obj) return {};
      return obj;
    },
    // 移除 key
    remove(key = '') {
      localStorage.removeItem(key);
    },
    // 移除所有 key
    removeAll() {
      localStorage.clear();
    },
  });
};

別忘了 nuxt.config.js 也要加上

plugins: ["~/plugins/localStorage.js"],

調用 $localStorage

inject localStorage 的方法後，就可以在全站隨心所欲的使用 this.$localStorage 了!

mounted() {
  this.$localStorage.set("data", { name: "bobee" });
  console.log(this.$localStorage.get("data"));
}

包裝 cookies

cookie 也是同包裝 localStorage 的作法，而 cookie 可以使用 Js-cookie 套件更方便操作

安裝 Js-cookie

npm i js-cookie -S

新增 cookie.js，自行注入 cookies 方法

plugins/cookie.js

import Cookies from 'js-cookie';
export default ({ app }, inject) => {
  inject('cookies', {
    set: (name, value = {}, expires = { expires: 365 }) => {
      Cookies.set(name, value, expires);
    },
    get: (name) => {
      const val = Cookies.get(name);
      try {
        return JSON.parse(val);
      } catch (err) {
        return undefined;
      }
    },
    remove: (name) => {
      Cookies.remove(name);
    },
    removeAll: () => {
      const NodeList = Object.keys(Cookies.get());
      NodeList.forEach((el) => Cookies.remove(el));
      window.location.replace('/');
    },
  });
};

nuxt.config.js

plugins: ["~/plugins/cookie.js"],

調用 $cookies

mounted() {
  this.$cookies.set("bobee", { age: 11 });
  console.log(this.$cookies.get("bobee"));
}

---

筆記來源: 2021 Vue3 專業職人 | 進階篇

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。