当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

react-use-localstorage

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者屠坚壁

操作系统跨平台

开源组织无

适用人群未知

软件概览

react-use-localstorage

depends on stable v16.8.1~

Access Local Storage using React hooks.

Fork it on CodeSandbox

How to use it

import React from 'react';
import ReactDOM from 'react-dom';
import useLocalStorage from 'react-use-localstorage';

import './styles.css';

function App() {
  const [item, setItem] = useLocalStorage('name', 'Initial Value');

  return (
    <div className="App">
      <h1>Set Name to store in Local Storage</h1>
      <div>
        <label>
          Name:{' '}
          <input
            type="text"
            placeholder="Enter your name"
            value={item}
            onChange={(e) => setItem(e.target.value)}
          />
        </label>
      </div>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Note for SSR (server-side rendering)

If you are using Gatsby or other SSR frameworks, such as Next.js, refer to this workaround by @hencatsmith.

You need to make sure that window is available.

const useSsrLocalStorage = (
  key: string,
  initial: string
): [string, React.Dispatch<string>] => {
  return typeof window === 'undefined'
    ? [initial, (value: string) => undefined]
    : useLocalStorage(key, initial);
};

Demo

Changelog

Expand Changelog

3.4.0

This version "Watch changes on storage and change state".
Reference: https://github.com/dance2die/react-use-localstorage/pull/30

Thank you @VitorLuizC for the PR and @Svish for the review.

3.3.0

Reverted the implementation of setValue to set localStorage value directly, instead of depending on useEffect.
Reference: window.localstorage updated after value managed by useLocalStorage #29

3.2.1

The library is covered by test.Thank you so much, @SeanMcP~

3.0.0

Decided to go with @TheAifam5 the following breaking change as the type is derived from React type definition.

Breadking change: setIteme type is changed from (item: string) => void () to React.Dispatch<string>
Updated infrastructure by @TheAifam5 �� in PR #13
- Dropped babel in favor of tsc + uglifyjs
- Replaced npm with yarn
- Added husky for pre-commit git hooks
- Source map has been dropped from distribution
- distribution is moved from dist to lib folder
  2.4.1
Added useLocalStorage return type explicitly to generate correct index.d.ts typing file.
2.4.0
Added TypeScript typings as suggested by @TheAifam5 in Issue #9
2.3.0
Fixed a bug where initial value is returned all the time #7 by @lilasquared ��
2.2.0
Sets initial value in local storage
2.1.0
Can optionally pass an initial value
This is to prevent form field from being uncontrolled.
2.0.0
Breaking change - setItem doesn't require key
1.1.1
Updated to React v16.8.1, which contains the patched Hooks
1.1.0
Updated dev dependency version
1.0.0
Updated to React v16.8.0, which contains the stable Hooks
0.0.6
Changed the language from JavaScript to TypeScript
It has minimized the distribution file greatly

Contributors

Thanks goes to these wonderful people (emoji key):

_{Sung Kim}

_{Vitor Luiz Cavalcanti}

This project follows the all-contributors specification. Contributions of any kind welcome!

使用案例

React-use

React-use 一个很好用的React Hooks库 github地址：https://github.com/streamich/react-use 传感器 useBattery - 跟踪设备电池状态。 useGeolocation - 跟踪用户设备的地理位置状态。 useHover and useHoverDirty - 跟踪某个元素的鼠标悬停状态。 useIdle - 跟踪用户是否处于非
react-query

修仙大橙子：https://segmentfault.com/a/1190000041939135 查询键(Query Keys)及查询函数(Query Functions) const getMenuId = () => request<{ id: string; name: string }>({ url: `/menu`, method: "GET", }); const
React-router-dom6配置路由表的权限

直接上代码 import React,{useEffect, useState} from 'react' import {useLocation,Navigate} from 'react-router-dom' export default function IsAuth(props) { const localocation =useLocation() const [preTrue
react-redux使用总结（一）

一、redux使用场景当多个组件的state互相依赖，且组件间无法进行有效通信时，我们希望把这些state抽离出来进行集中管理，各组件可按照一定的规则进行状态的读写，这就是redux提供的功能二、介绍 redux 一款状态管理工具，用于集中管理应用中（多个组件共享）的state 有下面三个核心概念： store 整个应用中的state都存储在一棵object tree上，并且这个 object
使用 create-react-app + react-router-dom + axios + antd + react-redux 构建 React 项目(1)

1、安装、构建复制代码全局安装 npm install -g create-react-app 构建一个my-app的项目 npx create-react-app my-app cd my-app 启动编译当前的React项目，并自动打开 http://localhost:3000/ npm start 2、项目目录 // 默认的 ├── package.json ├── public
react中由缓存功能引发版本更新的血案（react-router-cache-router缓存组件，react-router-dom5，路由鉴权...

react实现缓存功能首先React Router 必须确保是最新版本，因为使用了 new Context，所以必须确保Router 使用相同的 API，之前的项目我们采用的是react-router3.xx版本，想都不用想，这将到这我们的项目中要改一些别人舍弃的东西。。。一、react-router5 新版本的router不支持route里面嵌套route，可以放到另一个组件中去配置，这样
React-router

React Router使用用法 React Router功能介绍是React生态库之一，是可以在CSR和SSR环境下为了React而设计的路由库。客户端：React环境服务端：node、RN 安装： npm install react-router-dom@6 yarn add react-router-dom@6 基本用法： //src/index.js import * as Rea
【react-use】基本使用

简介随着 React Hooks 的发展，各个团队都开始尝试使用 Hooks 代替 Class，Hooks 正逐渐成为 React 组件的主流写法。得益于 Hooks 的逻辑封装能力，我们可以将常见的逻辑封装起来，以减少代码复杂度。或者使用社区上别人封装的 Hooks，比如 react-use 等。react-use 是社区最流行的 Hooks 库 github地址：https://github
React自定义Hooks——useLocalStorage

封装任何的函数，都是将一些重复的逻辑单独封装到一个函数。而不是为了封装而封装。定义useLocalStorage，是因为localStorage，在不同的组件中获取，更新。每次更新或者获取都是localStorage.setItem/localStorage.getItem。单独封装为一个hook，在获取和更新的时候，就像使用state一样简单： useLocalStorage： import
react18+react-router-dom v6实现路由鉴权

1 在项目目录新建router目录 import React from "react"; import { Routes, Route } from "react-router-dom"; import Author from "../pages/AuthRouter/index.jsx"; import Layout from "../pages/Layout/index.jsx"; impor

react-use-localstorage

react-use-localstorage

How to use it

Note for SSR (server-side rendering)

Demo

Changelog

Contributors

同类工具

相关阅读

相关文章

相关问答

相关文档