こんにちは。フリーランス・コンサルタント＆エンジニアの さてさて、前回記事「Trello風のタスク管理をつくる」ではVueを使ってドラッグ・アンド・ドロップを実装してみました。
そして、今回はユーザビリティに関連する機能をご紹介したいと思います。
それは・・・・
ページ移動しても検索パラメータをキープする
機能です。
というのも、通常ブラウザページで入力した内容はページ移動したり、リロードするとまた最初から入力しなおす必要があります（コレめんどうですよね・・・😫）
実は以前「ページ移動してもVueの状態を保持する方法」という記事で同じ機能を紹介したのですが、これはURLの#以降にデータを埋め込むというものでした。
もちろんこの方法でもできなくはないのですが、検索パラメータが多い場合はやはりURL以外の場所にデータを格納しておくべきです。
そこで！
今回は、sessionStorageでこの機能を実装してみます。
ぜひ楽しみながらやってみましょう❗
（最後に実際に開発したソースコードをダウンロードできますよ）
「cookieよりシンプルに実装できます😊👍」
この記事を見たらできること
入力した検索パラメータをブラウザに保存し、ページ移動やリロードしても復活させることができるようになります。
では実際にやっていきましょう❗
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();
}
});
JavaScript側のコードもシンプルですが、sessionStorageがどこで実行されているかに注目してみてください。
①Ajaxで検索結果を取得
ここはsessionStorageは関係なく単にAjaxで検索結果を取得する部分としてメソッドをつくっています。
なぜなら、ページを表示したらすぐに検索結果を取得することになりますが、sessionStorageのコードが入っていると検索パラメータの保存部分が重複してしまうからです。
②sessionStorageへ保存
検索ボタンがクリックされたときに実行されるコードです。
sessionStorage.setItem()で検索データを保存していますが、一旦JSONにして（つまり、文字列にして）保存していることに注意してください。
③変数、検索パラメータをクリアする
「クリア」リンクがクリックされたときに実行されるコードです。
ここでは、sessionStorage.removeItem()でブラウザに保存された検索パラメータをクリアしていますが、それだけでなくVue変数のparamsとpostsも初期化しています。
④前回の検索パラメータがあれば取得
ページが表示された時点で実行される部分です。
ここでは、sessionStorage.hasOwnProperty()で検索パラメータが保存されているかをチェックし、もし見つかった場合はその内容をparamsに格納します（つまり、検索パラメータを復活させることになります）
テストしてみる
デモページを用意したので実際に試してみてください😊✨
ちなみに
sessionStorageは、タブやブラウザが閉じられた時点で全てクリアされますので注意してください。また、同じページであっても別タブとデータ共有できません。
もし、いつでもデータを取得したい場合はsessionStorageではなく、localStorageを使ってください。
詳しくは、localStorageとsessionStroageの違いとは？？をご覧ください。
教材ソースコードをダウンロードする
今回実際に開発した教材ソースコードを以下からダウンロードできます。
Vue + sessionStorageでページ移動しても検索内容をキープ※CDNを使っているので展開したらすぐ実行できますよ👍
おわりに
ということで、今回はVue + sessionStorageで検索パラメータをキープする機能を作ってみました。
実際の開発でもページ移動した後に戻るボタンをクリックすることも多いので、クライアントさん側からしても結構需要がある機能だと思います。
ぜひ一度試して見てくださいね。
ではでは〜❗
「明日、amazonから人生初の置き配が来ます。
なぜかドキドキ（笑）」
