ReactでLocalStorageに保存する

プラトン再発行

フォロワー： 0

概要

軽量アプリケーションを開発する場合–データを保存したい場合があります。データベースが過剰な場合–優れた代替手段があります。 localStorage!

データベースの目的でデータベースを置き換えるわけではありませんが、簡単にアクセスできるデータポイントを格納するために利用できる単純なファイルベースのストレージシステムとして機能します。

この記事では、使用方法を学びます localStorage ブラウザにデータを簡単に保存できます。このデータは次のように保存されます キーと値のペア ユーザーが簡単に取得できること。

にデータを保存する localStorage Reactではとても簡単です：

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

急いでおらず、これがどのように機能するかについてもっと知りたい場合は、読み続けてください！

何ですかローカルストレージ?

localStorage 開発者が保存できるようにするWebストレージオブジェクトです キーと値のペア Webブラウザーで、ユーザーがブラウザーを閉じたり再起動したりした場合でも、このデータがすべてのページの更新後も存続することを保証します。有効期限はありません。保存されたキーと値のペアには、配列、オブジェクト、文字列、数値など、あらゆるタイプのデータを含めることができます。

ただし、ユーザーがブラウザのキャッシュとローカルストレージをクリアするとデータが失われるため、これでWebサイトやWebアプリのデータベースの役割を置き換えることはできません。 ローカルストレージ そのように使用する必要があります。それにもかかわらず、ユーザーが使用できる状況があります localStorage、実装など ダークモード 機能、ユーザーのフォーム入力値の永続化、およびその他多数。

localStorage ブラウザのストレージオブジェクトにアクセスできるようにする組み込みメソッドがあります。一例は setItem() メソッド。これにより、キーと値をに追加できます。 localStorageしたがって、データを保存できます。他の方法を使用してデータを取得します– getItem()、データを削除– removeItem()、すべてクリア localStorage インスタンス– clear()、などなど。

データの保存先ローカルストレージ setItem（）方法

　 setItem() メソッドを使用すると、任意のデータ型の値をに保存できます localStorage キーに値を割り当てることにより、 キーと値のペア。このキーは、対応する値を取得するときに使用されます。 localStorage.

注：データを保存するために localStorage、最初に変換する必要があります JSON文字列 JSON.stringify() 関数。そして、それを取得したい場合は、を使用してデータを解析します JSON.parse()、JSON文字列をに変換し直します JSONオブジェクト.

Reactでデータを操作するとき、私たちは頻繁に使用します フック 私たちがそれを保存/保持するのを助けるために。フックは、そのデータをアップロードする場所を見つけるのにも役立ちます。これは localStorage を使用するため useState() および useEffect() フック。これらのフックは重要です。 useState() フックはデータを保持および設定するために使用されますが、 useEffect() フックは、最初のレンダリング後、およびXNUMX番目のパラメーターが変更されたときに状態が渡されるたびにデフォルトでトリガーされます。

基礎を説明した後、データを保存するために使用するコードは次のとおりです localStorage:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

最初に、保存するデータを保持する状態を作成しました localStorage、そして作成しました useEffect() フック、XNUMX番目のパラメーターとして状態を渡します。そうすれば、状態が変化するたびに、 localStorage 現在の値に更新されます。

データストレージを支援するために使用されるコア機能を、 useEffect() 針：

localStorage.setItem('dataKey', JSON.stringify(data));

まとめ

この記事では、Reactフックを使用してReactにデータを保存する方法を学びました。 localStorage。前に述べたように、これはデータベースの役割を置き換えることはありませんが、UIを改善できるが、ブラウザーから独立して永続化されることを意図していないユーザー関連データの保存に役立ちます。

タイムスタンプ： 2022 年 6 月 16 日２０２２年７月１１日