7-7 透過 localStorage 保存使用者設定的地區

本單元對應的專案分支為：save-location-name-in-localstorage。

單元核心#

這個單元的主要目標包含：

  • 了解如何將資料保存在 localStorage 中
  • 了解如何在瀏覽器中檢視 localStorage 保存的資料
  • 保存使用者選取的地區在 localStorage 中

現在「臺灣好天氣」的功能已經差不多完成了，但使用者目前只要重新整理瀏覽器，原本選擇的地區設定就會變回預設值，當初的設定並不會被保存下來。因此在這個單元中，我們要將使用者設定的地區資訊保存下來，因為我們沒有後端伺服器保存使用者資料，所以使用者偏好的地區資訊會儲存在瀏覽器的 localStorage 中，使用者可以透過清除瀏覽器的暫存資料來清空原先的設定。

localStorage 的使用#

localStorage 是瀏覽器提供給各個網站的一個儲存空間，裡面可以保存字串的資料，使用方式非常簡單：

// 儲存資料
localStorage.setItem(keyName, keyValue);
// 讀取特定資料
localStorage.getItem(keyName);
// 清除特定資料
localStorage.removeItem(keyName);
// 清除全部資料
localStorage.clear();

保存使用者設定的地區#

WeatherSetting 元件#

套用「臺灣好天氣」中，當使用者在 WeatherSetting 元件中點擊儲存時，就可以將這個資訊儲存到瀏覽器的 localStorage 中：

// ./src/views/WeatherSetting.js
const WeatherSetting = ({
cityName,
handleCurrentCityChange,
handleCurrentPageChange,
}) => {
const [locationName, setLocationName] = useState(cityName);
// ...
const handleSave = () => {
// ...
// 點擊儲存時，順便將使用者選擇的縣市名稱存入 localStorage 中
localStorage.setItem('cityName', locationName);
};
// ...
};

現在你可以打開瀏覽器的開發者工具，進到 Application 頁籤中，左側有一個「Local Storage」的選項，點進去我們的網站（localhost:3000）後，只要使用者在天氣設定頁點下儲存時，資訊就會保存在 Local Storage 中，除非使用者清除瀏覽器紀錄，否則即使將網站關閉、重新整理，資料都會繼續保留：

Imgur

App 元件#

現在已經能夠把使用者選擇的地區保存在 Local Storage 中，接著只需要在 App 元件中，把保存在 localStorage 中的資訊取出來，這樣使用者看到的地區就會是先前設定過的地區。

我們只需要在 App 元件中：

  1. 透過 localStorage.getItem() 這個方法，即可把資料從 localStorage 中取出
  2. 若 localStorage 取得到資料，表示使用者先前有設定過地區，只需將取出的資料帶入 useState 作為 currentCity 的預設資即可；若 localStorage 取不到資料，表示使用者先前沒有設定過地區，會得到 null，這時再把預設值設為一個縣市地區（例如，臺北市）
// ./src/App.js
// ...
const App = () => {
// 從 localStorage 取出先前保存的地區，若沒有保存過則給予預設值
const storageCity = localStorage.getItem('cityName') || '臺北市';
// 帶入 useState 作為 currentCity 的預設值
const [currentCity, setCurrentCity] = useState(storageCity);
};

如此就大功告成了！現在即使重新整理頁面或關閉網站，下次打開的時候一樣會套用原先設定的地區。

換你了！保存使用者設定的地區#

現在請你將使用者選擇的地區保存在 localStorage 中。你可以參考以下步驟：

  • 在 WeatherSetting 元件中，當使用者點擊儲存時，透過 localStorage.setItem 的方法把資料保存在 localStorage 中
  • 在 App 元件中，每次載入時先透過 localStorage.getItem() 從 localStorage 取出先前保存過的地區資訊，若沒有儲存過則使用預設值
  • 將取得的內容，放入 useState 中作為 currentCity 的預設值

這個單元完整的程式碼如下：

本單元相關之網頁連結、完整程式碼與程式碼變更部分可於 save-location-name-in-localstorage 分支檢視：https://github.com/pjchender/learn-react-from-hook-realtime-weather-app/tree/save-location-name-in-localstorage

Imgur

Edit this page