ローカル ストレージは、開発者がユーザーのブラウザ内にデータを保存できるようにする便利な Web 開発ツールです。この記事では、初心者レベルの例から始めて、より複雑なテクニックに至るまで、ローカル ストレージのさまざまな機能を見ていきます。このガイドを終えると、Web アプリケーションでローカル ストレージを適切に使用する方法の基本を理解できるようになります。

ローカル ストレージに関する初級レベルの例

1.ユーザー設定の保存:

    
    
    



    Choose a theme:
    
        Light
        Dark
        Medium
    
    Save Preference

    

ユーザーがテーマを選択して「設定を保存」ボタンを押すと、このコードはテーマをコンソールに記録します。このログを読むには、ブラウザの開発者ツールを開き (通常は F12 キーを押すか、ページを右クリックして「検査」を選択します)、コンソール タブに移動します。(続きを読む)

2.ユーザー入力の記憶:

    
    
    



    
    Save Input

    

この HTML サンプルは、ユーザーがテキスト フィールドにテキストを入力し、ブラウザのローカル ストレージに保存できる単純な Web ページを生成します。

ユーザーが入力ボックスにテキストを入力して「入力を保存」ボタンを押すと、テキストはブラウザのローカル ストレージに保存されます。これは、ユーザーが Web サイトを更新したり、ブラウザを閉じて再度開いたりした場合でも、保存された入力には引き続きアクセスできることを意味します。コンソールのログとアラートは、入力が正常に保存されたことをユーザーに通知します。 （続きを読む）

3.ショッピング カートの永続性:

    
    
    



    
Shopping Cart
    

この例では、ローカル ストレージを使用してショッピング カートを保存する方法を示します。カートに追加されたアイテムは、キー「cart」の下のローカル ストレージに配列として保存されます。ページが読み込まれると、保存されたカート項目がローカル ストレージから取得されて表示されます。

「アイテム X をカートに追加」ボタンのいずれかをクリックすると、適切なアイテムがショッピング カートに追加され、更新されたカートの内容がコンソールに表示されます。これらのログを検査するには、ブラウザの開発者ツールを開き (通常は F12 キーを押すか、ページを右クリックして「検査」を選択します)、コンソール タブに移動します。

ブラウザの開発者ツールを使用してローカル ストレージを直接表示することもできます。ほとんどのブラウザでは、ページを右クリックし、「検査」を選択して開発者ツールを取得し、「アプリケーション」または「ストレージ」タブに移動することでこれを行うことができます。そこから、「ローカル ストレージ」セクションを展開して、Web サイトのキーと値のペアを表示します。この例では、キー「cart」に、保存されたカート項目を表す JSON 文字列が含まれています。
記事全文を読む - Web 開発でローカル ストレージをマスターする: 初心者から専門家までの 8 つの実践例!

Json を学ぶ – ここをクリック