こんにちは！今回は、kintoneカスタマイズの中でも、ブラウザのSession Storage（セッションストレージ）を活用した一時的なデータ管理についてご紹介します。
一見シンプルな仕組みですが、これを使いこなすことで、kintoneアプリのユーザー体験（UX）をぐっと改善できます。
実際のサンプルコード付きで、実装ステップも解説します！
お知らせ①
🌟無料＆登録不要でプラグインのお試しが可能！🌟
kintoneユーザーの皆さん！
エムザスのkintoneプラグインはもう試しましたか？🤔
エムザスでは以下のようなプラグインを開発しています！👇
デモ環境で、ほとんどの機能が今すぐお試しいただけます✨
さらに、お客様のドメインで無料で3ヶ月間、すべての機能を試すこともできます！🎉
それでは、本題に入ります！
1. Session Storageとは？
まず、Session Storageは、Webブラウザに一時的なデータを保存できる仕組みです。
特徴は以下の通りです：
- タブごとに独立して保存される
- ページをリロードしても保持される
- タブを閉じると消える（セッション終了）
- 保存できるのは文字列のみ（JSONで複雑なデータも可）
🔄 localStorageとの比較
| 特徴 | sessionStorage | localStorage |
|---|---|---|
| データの保持期間 | タブを閉じるまで | 明示的に消さない限り永続 |
| スコープ | 同一タブ内 | 同一ドメイン全体 |
| 共有性 | タブごとに独立 | すべてのタブで共通 |
| 主な用途 | 一時的な保存 | 永続的な保存 |
2. kintoneでの活用シーン
Session Storageは、kintoneのJavaScriptカスタマイズと非常に相性が良いです。たとえば：
- 一覧画面でクリックした情報を、詳細画面で活用したい
- 入力途中の内容を一時保存しておきたい（下書き）
- フィルターや検索条件を一時保存したい
3. 実装例：レコードIDを一時保存し、詳細画面で利用する
3.1 一覧画面でクリックしたレコードIDを保存
(function () {
'use strict';
kintone.events.on('app.record.index.show', function(event) {
const records = event.records;
records.forEach(function(record) {
const recordId = record.$id.value;
const rowEls = kintone.app.getFieldElements('レコード番号'); // 表示フィールド名に変更
if (rowEls && rowEls.length > 0) {
// クリックイベントを追加
rowEls.forEach(function(el) {
el.addEventListener('click', function() {
sessionStorage.setItem('selectedRecordId', recordId);
console.log('選択されたレコードID:', recordId);
});
});
}
});
return event;
});
})();
3.2 詳細画面で保存されたIDを取得
(function () {
'use strict';
kintone.events.on('app.record.detail.show', function(event) {
const savedId = sessionStorage.getItem('selectedRecordId');
if (savedId) {
console.log('保存されたレコードID:', savedId);
} else {
console.log('保存されたレコードIDはありません。');
}
return event;
});
})();
これで、一覧画面でユーザーが選んだレコードIDを、詳細画面で再利用することができます。
4. 応用：複雑なデータ構造を一時保存する
Session Storageには文字列しか保存できませんが、JavaScriptのJSON機能を使えば、オブジェクトや配列も保存可能です。
保存する例：
const tempData = {
keyword: '案件',
status: ['未処理', '処理中'],
user: '佐藤'
};
sessionStorage.setItem('tempFilter', JSON.stringify(tempData));
取得する例：
const savedData = sessionStorage.getItem('tempFilter');
if (savedData) {
const obj = JSON.parse(savedData);
console.log(obj.keyword); // => '案件'
}
5. セッションデータの削除方法
特定のデータだけ削除
sessionStorage.removeItem('tempFilter');全部削除（※慎重に）
sessionStorage.clear();削除は、画面遷移後やユーザーが操作を完了したときなどに行うと安全です。
6. 注意点とベストプラクティス
- セッションはタブ単位なので、他のタブでは使えません
- 容量はブラウザによって異なりますが、概ね5MB以内
- 個人情報やパスワードなどの保存は禁止（セキュリティリスク）
- ストレージへのアクセスは、try-catchで安全に処理することも推奨
7. まとめ
Session Storageは、kintoneのカスタマイズにおいて簡単で便利な一時保存手段です。
一覧・詳細画面をまたいだデータ引き継ぎや、フォームの下書き保存など、多くの場面で活躍できます。
特にユーザー体験（UX）を意識したカスタマイズでは、ちょっとした使い勝手の向上に大きく貢献します。
８. おまけ：よくある質問（FAQ）
Q1. タブをまたいでデータを使いたいんだけど？
A. sessionStorageでは不可です。localStorageを使えば可能です。
Q2. 保存したデータはkintoneのレコードに反映されますか？
A. いいえ。Session Storageはブラウザ内だけの保存です。レコード更新とは無関係です。
Q3. 保存していた値が消えてしまいました
A. タブを閉じた、もしくはセッションが切れた可能性があります。一時的な用途にとどめましょう。