React Hooks useLocalStorage - Rahmat Agung Julians

Ini berguna ketika kita ingin sinkronkan status ke penyimpanan lokal sehingga tetap ada melalui penyegaran halaman, Penggunaannya mirip dengan useState kecuali kami meneruskan kunci penyimpanan lokal sehingga kami dapat default ke nilai itu pada pemuatan halaman alih-alih nilai awal yang ditentukan.

Versi Javascript

useLocalStorage.js

import { useState } from "react";
// Penggunaan
function App() {
  // Mirip dengan useState tetapi arg pertama adalah kunci untuk nilai di penyimpanan lokal.
  const [name, setName] = useLocalStorage("name", "Bob");
  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}
// Hook
function useLocalStorage(key, initialValue) {
  // Nyatakan untuk menyimpan nilai kita
  // Lewati fungsi status awal ke useState sehingga logika hanya dieksekusi sekali
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Dapatkan dari penyimpanan lokal dengan kunci
      const item = window.localStorage.getItem(key);
      // Parse json yang disimpan atau jika tidak ada yang mengembalikan initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Jika kesalahan juga mengembalikan initialValue
      console.log(error);
      return initialValue;
    }
  });
  // Mengembalikan versi terbungkus dari fungsi setter useState yang ...
  // ... mempertahankan nilai baru ke localStorage.
  const setValue = (value) => {
    try {
      // Izinkan nilai menjadi fungsi sehingga kita memiliki API yang sama dengan useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
     // Simpan status
      setStoredValue(valueToStore);
      // Simpan ke penyimpanan lokal
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      // Implementasi yang lebih maju akan menangani kasus kesalahan
      console.log(error);
    }
  };
  return [storedValue, setValue];
}

Versi Typescript

useLocalStorage.tsx

import { useState } from "react";
// Penggunaan
function App() {
  // Mirip dengan useState tetapi arg pertama adalah kunci untuk nilai di penyimpanan lokal.
  const [name, setName] = useLocalStorage<string>("name", "Bob");
  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}
// Hook
function useLocalStorage<T>(key: string, initialValue: T) {
  // Nyatakan untuk menyimpan nilai kita
  // Lewati fungsi status awal ke useState sehingga logika hanya dieksekusi sekali
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      // Dapatkan dari penyimpanan lokal dengan kunci
      const item = window.localStorage.getItem(key);
      // Parse json yang disimpan atau jika tidak ada yang mengembalikan initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Jika kesalahan juga mengembalikan initialValue
      console.log(error);
      return initialValue;
    }
  });
  // Mengembalikan versi terbungkus dari fungsi setter useState yang ...
  // ... mempertahankan nilai baru ke localStorage.
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      // Izinkan nilai menjadi fungsi sehingga kita memiliki API yang sama dengan useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
     // Simpan status
      setStoredValue(valueToStore);
      // Simpan ke penyimpanan lokal
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      // Implementasi yang lebih maju akan menangani kasus kesalahan
      console.log(error);
    }
  };
  return [storedValue, setValue] as const;
}