Local Storage: Hook React Giúp Dễ Dàng Sử Dụng Local Storage

@rehooks/local-storage

Hook React cho phép đồng bộ hóa với local-storage.

Tài liệu API có thể được tìm thấy here.

Tính Năng

• Tự động chuyển đổi sang JSON
• Đồng bộ hóa trên nhiều tab
• Cung cấp các hàm để cập nhật localStorage và kích hoạt cập nhật trạng thái bên ngoài thành phần
• Gợi ý kiểu thông qua TypeScript

Cài Đặt

Với Yarn

yarn add @rehooks/local-storage

Với NPM

npm i @rehooks/local-storage --save

Sử Dụng

Ghi vào Lưu Trữ

Điều này có thể xuất phát từ bất kỳ đâu trong ứng dụng của bạn.

Lưu ý: Các đối tượng được truyền vào writeStorage sẽ tự động được chuyển thành chuỗi. Điều này sẽ không hoạt động cho cấu trúc vòng tròn.

import React from 'react';
import { writeStorage } from '@rehooks/local-storage';

let counter = 0;

const MyButton = () => (
  <button onClick={_ => writeStorage('i', ++counter)}>
    Click Me
  </button>
);

Đọc Từ Lưu Trữ

Thành phần này sẽ nhận các cập nhật từ local storage.

Javascript :

import React from 'react';
import { useLocalStorage } from '@rehooks/local-storage';

function MyComponent() {
  const [counterValue] = useLocalStorage('i'); // send the key to be tracked.
  return (
    <div>
      <h1>{counterValue}</h1>
    </div>
  );
}

Typescript :

import React from 'react';
import { useLocalStorage } from '@rehooks/local-storage';

function MyComponent() {
  const [counterValue] = useLocalStorage<number>('i'); // specify a type argument for your type
  // Note: Since there was no default value provided, this is potentially null.
  return (
    <div>
      <h1>{counterValue}</h1>
    </div>
  );
}

Tùy chọn sử dụng giá trị mặc định

Lưu ý: Các đối tượng được truyền vào tham số mặc định của useLocalStorage sẽ tự động được chuyển thành chuỗi. Điều này sẽ không hoạt động cho cấu trúc vòng tròn.

import React from 'react';
import { useLocalStorage } from '@rehooks/local-storage';

function MyComponent() {
  // Note: The type of user can be inferred from the default value type
  const [user] = useLocalStorage('user', { name: 'Anakin Skywalker' });
  return (
    <div>
      <h1>{user.name}</h1>
    </div>
  );
}

Xóa Từ Lưu Trữ

Bạn cũng có thể xóa các mục khỏi local storage.

import { writeStorage, deleteFromStorage } from '@rehooks/local-storage';

writeStorage('name', 'Homer Simpson'); // Add an item first

deleteFromStorage('name'); // Deletes the item

const thisIsNull = localStorage.getItem('name'); // This is indeed null

Sử Dụng Với Context

Được khuyến nghị sử dụng hook này với context nếu bạn muốn có giá trị mặc định được đồng bộ hoá đúng cách. Sử dụng useLocalStorage trong hai thành phần khác nhau với cùng một khóa nhưng giá trị mặc định khác nhau có thể dẫn đến hành vi không mong muốn.
Cảm ơn bạn!
Sử dụng Context cũng sẽ ngăn các thành phần từ việc hiển thị và thiết lập giá trị mặc định vào localStorage khi bạn chỉ muốn xóa chúng khỏi localStorage (giả sử nhà cung cấp context cũng không thực hiện việc hiển thị lại).

import React, { createContext, useContext } from 'react';
import { useLocalStorage } from '@rehooks/local-storage';

const defaultProfile = { name: 'Spongekebob' };
const defaultContextValue = [defaultProfile, () => {}, () => {}];

const ProfileContext = createContext(defaultContextValue);

export const ProfileProvider = ({ children }) => {
  const ctxValue = useLocalStorage('profile', defaultProfile);
  return (
    <ProfileContext.Provider value={ctxValue}>
      {children}
    </ProfileContext.Provider>
  );
};

const useProfile = () => useContext(ProfileContext);

const App = () => {
  const [profile] = useProfile();
  return <h1>{profile && profile.name}</h1>;
};

export default () => {
  return (
    <ProfileProvider>
      <App />
    </ProfileProvider>
  );
};

Ví dụ Đầy Đủ

Bạn có thể xem ví dụ này here on StackBlitz.

Lưu ý: Các hàm writeStorage và deleteFromStorage được cung cấp từ useLocalStorage cũng không yêu cầu bạn chỉ định khóa khi sử dụng chúng.

import React, { Fragment } from 'react';
import { render } from 'react-dom';
import { writeStorage, deleteFromStorage, useLocalStorage } from '@rehooks/local-storage';

const startingNum = 0;

const Clicker = () => (
  <Fragment>
    <h4>Clicker</h4>
    <button onClick={_ => {
      writeStorage('num', localStorage.getItem('num')
      ? +(localStorage.getItem('num')) + 1
      : startingNum
      )
    }}>
      Increment From Outside
    </button>
    <button onClick={_ => deleteFromStorage('num')}>
      Delete From Outside
    </button>
  </Fragment>
);

const IncrememterWithButtons = () => {
  const [number, setNum, deleteNum] = useLocalStorage('num');

  return (
    <Fragment>
      <p>{typeof(number) === 'number' ? number : 'Try incrementing the number!'}</p>
      <button onClick={_ => setNum(number !== null ? +(number) + 1 : startingNum)}>Increment</button>
      <button onClick={deleteNum}>Delete</button>
    </Fragment>
  );
};

const App = () => (
  <Fragment>
    <h1> Demo </h1>
    <IncrememterWithButtons />
    <Clicker />
  </Fragment>
);

// Assuming there is a div in index.html with an ID of 'root'
render(<App />, document.getElementById('root'));

Chi tiết tải về:

Tác giả: rehooks
Mã nguồn: https://github.com/rehooks/local-storage

Giấy phép: MIT license

Cảm ơn bạn!