ローカルストレージでデータを保存する方法

入力情報などを保存しておく方法としてcookieを使うことも多いかと思います。

cookieはサーバーにデータを送信します。

もう一つの方法としてLocalStorage（ローカルストレージ）に保存というものがあります。

LocalStorage（ローカルストレージ）とは
ローカルストレージの使い方
サンプル
1. html
2. jQuery

LocalStorage（ローカルストレージ）とは

ローカルストレージの特徴としてはcookieのようにサーバーにデータを送信しないので通信の影響がありません。

ローカルストレージはウェブブラウザにデータを一時的に保存するための技術の一つになります。

ローカルストレージを使うことで半永久的にデータを保持することが可能です。

ローカルストレージの使い方

それではローカルストレージの基本的な書き方は次のようになります。

データの保存

localStorage.setItem('キー', '値');

データの取得

localStorage.getItem('キー');

データの削除

localStorage.removeItem('キー');

初期化

localStorage.clear();

サンプル

サンプルとしてテキストボックスにテキストを入力してボタンを押したときにテキストをローカルストレージに保存する方法を紹介します。

読み込みしたときにローカルストレージに保存されているテキストをテキストボックスに反映します。

html

<form action="" method="POST" name="form">
    <input type="text" name="text" value="" placeholder="テキストを入力してください" id="Keywordbox">
    <input type="submit" name="submitSearch" value="検索">
</form>
        
<div class="storage_text"></div>

jQuery

jQuery(function() {


        let getword = localStorage.getItem('submitword');
        jQuery('#Keywordbox').val(getword);
        if (getword) {
                jQuery('.storage_text').html(getword);
                jQuery('input[type=text]').val(getword);
    	}

        //クリックしたら入力された値をLocalStorageに保存する
        jQuery('form[name="form"]').on('submit', function() {
                let submitword = jQuery('#Keywordbox').val();
                jQuery('.storage_text').html(submitword);
                localStorage.setItem('submitword', submitword);
        });
});

以上になります。