こんにちは！
九保すこひです（フリーランスのITコンサルタント、エンジニア）

【X】九保すこひ＠フリーランスエンジニア

さてさて、前回記事「Trello風のタスク管理をつくる」ではVueを使ってドラッグ・アンド・ドロップを実装してみました。

そして、今回はユーザビリティに関連する機能をご紹介したいと思います。

それは・・・・

ページ移動しても検索パラメータをキープする

機能です。

というのも、通常ブラウザページで入力した内容はページ移動したり、リロードするとまた最初から入力しなおす必要があります（コレめんどうですよね・・・）

実は以前「ページ移動してもVueの状態を保持する方法」という記事で同じ機能を紹介したのですが、これはURLの#以降にデータを埋め込むというものでした。

もちろんこの方法でもできなくはないのですが、検索パラメータが多い場合はやはりURL以外の場所にデータを格納しておくべきです。

そこで！

今回は、sessionStorageでこの機能を実装してみます。
ぜひ楽しみながらやってみましょう

（最後に実際に開発したソースコードをダウンロードできますよ）

「cookieよりシンプルに実装できます」

目次 [非表示]

1 この記事を見たらできること
2 HTML部分をつくる
3 JavaScript部分をつくる
4 テストしてみる
5 ちなみに
6 教材ソースコードをダウンロードする
7 おわりに

この記事を見たらできること

入力した検索パラメータをブラウザに保存し、ページ移動やリロードしても復活させることができるようになります。

では実際にやっていきましょう

HTML部分をつくる

まずはHTML部分です。

<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container pt-4">
    <h1 class="mb-3">Vue + sessionStorage で検索パラメータをキープ</h1>
    <p class="bg-light p-3">検索後、ページをリロードしてもパラメータが復活できることを確認してください。</p>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label>名前</label>
                <input class="form-control" type="text" v-model="params.name">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label>出身地</label>
                <select class="form-control" v-model="params.pref">
                    <option></option>
                    <option value="tokyo">東京</option>
                    <option value="osaka">大阪</option>
                    <option value="nagoya">名古屋</option>
                    <option value="fukuoka">福岡</option>
                    <option value="sapporo">札幌</option>
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label>性別</label>
                <div>
                    <label>
                        <input type="radio" value="" v-model="params.gender"> 全て
                    </label>
                    <label>
                        <input type="radio" value="male" v-model="params.gender"> 男性
                    </label>
                    <label>
                        <input type="radio" value="female" v-model="params.gender"> 女性
                    </label>
                    <label>
                        <input type="radio" value="other" v-model="params.gender"> その他
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-right">
            <!-- 検索パラメータをクリア ・・・ ① -->
            <button type="button" class="btn btn-link" @click="clear">クリア</button>
            <!-- 検索を実行 ・・・ ② -->
            <button type="button" class="btn btn-primary" @click="search">検索する</button>
        </div>
    </div>
    <hr>
    <div class="row mt-5">
        <div class="col-md-12" v-if="searching">
            検索中 ...
        </div>
        <div v-else>
            <!-- 検索結果を表示 ・・・ ③ -->
            <div v-for="p in posts">
                <h3 v-text="p.title"></h3>
                <p class="bg-light p-3" v-text="p.body"></p>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>

    new Vue({
        
        // ここにVueコード

    });

</script>
</body>
</html>

HTML部分はシンプルな内容になっています。

①検索パラメータをクリア

入力したパラメータをクリアするリンクです。
後でVue側にメソッドclear()をつくります。

②検索を実行

クリックしたらAjaxで検索をするボタンです。
Vue側のsearch()メソッドを実行します。

③検索結果を表示

検索結果をVueのv-forループで全て表示する部分です。

JavaScript部分をつくる

続いて、メインのJavaScript部分です。

new Vue({
    el: '#app',
    data: {
        params: {
            name: '',
            pref: '',
            gender: ''
        },
        posts: [],
        searching: false
    },
    methods: {
        getPosts() { //  Ajaxで検索結果を取得 ・・・ ①

            this.searching = true;
            this.posts = [];

            fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
                .then(response => response.json())
                .then(data => {

                    this.posts = data;

                })
                .catch(error => {

                    // エラーの場合

                })
                .then(() => {

                    this.searching = false;

                })

        },
        search() {

            sessionStorage.setItem('search-params', JSON.stringify(this.params)); //  sessionStorageへ保存 ・・・ ②
            this.getPosts();

        },
        clear() { //  変数、検索パラメータをクリアする ・・・ ③

            this.params = {
                name: '',
                pref: '',
                gender: ''
            };
            this.posts = [];
            sessionStorage.removeItem('search-params'); // sessionStorageをクリア

        }
    },
    mounted() {

        //  前回の検索パラメータがあれば取得 ・・・ ④
        if(sessionStorage.hasOwnProperty('search-params')) {

            this.params = JSON.parse(
                sessionStorage.getItem('search-params')
            );

        }

        this.getPosts();

    }
});