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";// Penggunaanfunction 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> );}// Hookfunction 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";// Penggunaanfunction 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> );}// Hookfunction 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;}