NextJs または React アプリケーションで localStorage を使用する

ローカル ストレージにデータを追加するには、次のメソッドを使用します。 setItem() の localStorage。構文は次のとおりです。

localStorage.setItem(key, value)

• key はキーで、格納された値に関連付けられた名前を表します。これにより、後でアクセスできるようになります。
• value テーマなどのように、保存する値です。ここに a を入力する必要があります string

たとえば、暗いテーマまたは明るいテーマの場合:

localStorage.setItem('ThemeDark', 'true');

保存された値を取得するには、メソッドを使用します getItem()。 構文は次のとおりです。

localStorage.getItem(key)

このコードでは、値を取得したい特定のキーをターゲットにします。値は次の形式で返されます。 string。この例でブール値など、別の型の値を取得する場合は、次を使用する必要があります。 JSON.parse()、を変換するには string で bool。

JSON.parse(localStorage.getItem('ThemeDark'))

次の方法を使用して保存されたデータを削除することもできます removeItem()。削除するキーをパラメータとして受け取ります。

 localStorage.removeItem(key)

このようにして、キーとそれに対応する値がローカル ストレージから削除されます。私たちの例では:

 localStorage.removeItem('ThemeDark')

ローカルストレージを空にするには、次のメソッドを使用します clear()。保存されているすべてのペアを削除できます。

localStorage.clear()

メソッドを使用できます key() ローカル ストレージ内の特定のインデックスで値のキーを検索します。

localStorage.key(index)

たとえば、2 番目のキーの名前を取得したい場合は、次のようになります。

localStorage.key(1)

最後に、次のメソッドを使用してローカル ストレージのサイズを知ることができます。 length()。このようにして、ローカル ストレージに存在するキーと値のペアの数を取得します。

localStorage.length()

次のエラー メッセージが表示される場合があります。 ReferenceError: localStorage is not defined。これを調整するには、これ以上簡単なことはありません。次の条件を確認します。 window は明確に定義されています。

if (typeof window !== "undefined") {
  value = localStorage.getItem(key)
}