كيفية إستعمال localStorage مع React.js؟

الكائن localStorage عبارة عن كائن JavaScript عادي، ويمكنك إستخدامه في أي موقع بدون أي مشكلة وبغض النظر عن إطار العمل الذي تستعمله.

حاول أن تستعمل localStorage في الخطاف useEffect أو useState لكي لا يتم إستخدامه في كل عملية render للمكون component، بالشكل التالي:

import React, { useState } from "react";

const MyInput = () => {
  const [value, setValue] = useState(localStorage.getItem("key") || "");

  const onChange = (e) => {
    setValue(e.target.value);
    localStorage.setItem("key", e.target.value);
  };

  return <input value={value} onChange={onChange} />;
};

export default function App() {
  return (
    <div className="App">
        <MyInput />
    </div>
  );
}

في المثال السابق، يتم عمل input وأي شيء سوف يتم كتابته فيه سيتم تخزينه في localStorage مباشرة

يمكنك الإطلاع على المزيد عن localStorage من خلال هذه المقالات:

بتاريخ 28 دقائق مضت قال سامح أشرف:

الكائن localStorage عبارة عن كائن JavaScript عادي، ويمكنك إستخدامه في أي موقع بدون أي مشكلة وبغض النظر عن إطار العمل الذي تستعمله.

حاول أن تستعمل localStorage في الخطاف useEffect أو useState لكي لا يتم إستخدامه في كل عملية render للمكون component، بالشكل التالي:

import React, { useState } from "react";

const MyInput = () => {
  const [value, setValue] = useState(localStorage.getItem("key") || "");

  const onChange = (e) => {
    setValue(e.target.value);
    localStorage.setItem("key", e.target.value);
  };

  return <input value={value} onChange={onChange} />;
};

export default function App() {
  return (
    <div className="App">
        <MyInput />
    </div>
  );
}

في المثال السابق، يتم عمل input وأي شيء سوف يتم كتابته فيه سيتم تخزينه في localStorage مباشرة

يمكنك الإطلاع على المزيد عن localStorage من خلال هذه المقالات:

 

يعني في رياكت سوف يكون الإعتماد على الهوكس؟

بتاريخ الآن قال محمود سعداوي:

يعني في رياكت سوف يكون الإعتماد على الهوكس؟

بالفعل، فالخطافات hooks من أهم المواضيع في React ولا يخلو أي مشروع حتى ولو كان بسيط منها، لذلك يجب تعلمها جيدًا لكي تستطيع إستعمالها بشكل سليم.