一、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 (<><inputvalue={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></>);
}
