localStorage用法

一、localStorage API使用

注意，localStorage 只能存储字符串。

1.1 存储数据

例如，对象存储时，可以使用JSON.stringify 转成字符串；

// 假设你有一个对象
const myObject = {
  name: 'Alice',
  age: 25,
};

// 使用 JSON.stringify 将对象转换为字符串
const serializedObject = JSON.stringify(myObject);

// 存储到 localStorage
localStorage.setItem('myKey', serializedObject);

1.2 读取数据

读取时，再用JSON.parse 方法将字符串转换回对象。

// 使用 localStorage.getItem 获取存储的字符串
const storedObjectString = localStorage.getItem('myKey');

// 如果存在数据，使用 JSON.parse 将字符串转换回对象
const myObject = storedObjectString ? JSON.parse(storedObjectString) : null;

// 使用对象
console.log(myObject);

1.3 react中的使用

完整示例
在 React 组件中，你可以在需要的时候从 localStorage 读取数据，并在组件更新时将数据写入：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [myObject, setMyObject] = useState(null);

  useEffect(() => {
    // 从 localStorage 读取对象
    const storedObjectString = localStorage.getItem('myKey');
    setMyObject(storedObjectString ? JSON.parse(storedObjectString) : null);
  }, []); // 空依赖数组意味着这个 effect 只在组件挂载时运行一次

  const saveObjectToLocalStorage = () => {
    const myObject = {
      name: 'Alice',
      age: 25,
    };
    localStorage.setItem('myKey', JSON.stringify(myObject));
    setMyObject(myObject); // 更新状态以反映最新存储的对象
  };

  return (
    <div>
      {myObject ? (
        <div>
          <p>Name: {myObject.name}</p>
          <p>Age: {myObject.age}</p>
        </div>
      ) : (
        <p>No object found in localStorage</p>
      )}
      <button onClick={saveObjectToLocalStorage}>Save Object</button>
    </div>
  );
}

export default MyComponent;

1.4 其他方法介绍

参考文章

二、ahook

官方文档介绍
使用这个钩子之后，就和state用法很类似了

import React from 'react';
import { useLocalStorageState } from 'ahooks';

export default function () {
  const [message, setMessage] = useLocalStorageState<string | undefined>(
    'use-local-storage-state-demo1',
    {
      defaultValue: 'Hello~',
    },
  );

  return (
    <>
      <input
        value={message || ''}
        placeholder="Please enter some words..."
        onChange={(e) => setMessage(e.target.value)}
      />
      <button style={{ margin: '0 8px' }} type="button" onClick={() => setMessage('Hello~')}>
        Reset
      </button>
      <button type="button" onClick={() => setMessage(undefined)}>
        Clear
      </button>
    </>
  );
}