1.説明
セッションストレージとロカールストレージ Util の作成方法を共有します。
2.ソース
/**
* セッション
*/
export const session = {
/**
* セッションストレージ設定
* @param {string} key キー
* @param {string} value 設定値
* @param {integer} expires 有効時間
*/
set(key, value, expires) {
// 有効時間はミリ秒
let params = { key, value, expires };
if (expires) {
// 有効時間を追加
const data = Object.assign(params, { expiresStartTime: new Date().getTime() });
sessionStorage.setItem(key, JSON.stringify(data));
} else {
if (value instanceof Object || Array.isArray(value)) {
value = JSON.stringify(value);
}
sessionStorage.setItem(key, value);
}
},
/**
* セッションストレージ取得
* @param {string} key キー
* @returns {string} セッションストレージデータ
*/
get(key) {
let item = sessionStorage.getItem(key);
try {
item = JSON.parse(item);
} catch (error) {
console.error(error);
}
// 有効期間チェック
if (item && item.expiresStartTime) {
// 失効
if (new Date().getTime() - item.expiresStartTime > item.expires) {
sessionStorage.removeItem(key);
return false;
} else {
return item.value;
}
} else {
return item;
}
},
/**
* セッションストレージ削除
* @param {string} key キー
*/
remove(key) {
sessionStorage.removeItem(key);
},
/**
* セッションストレージをクリア
*/
clear() {
sessionStorage.clear();
}
}
/**
* ロカール
*/
export const local = {
/**
* セッションストレージ設定
* @param {string} key キー
* @param {string} value 設定値
* @param {integer} expires 有効時間
*/
set(key, value, expires) {
// 有効時間はミリ秒
let params = { key, value, expires };
if (expires) {
// 有効時間を追加
const data = Object.assign(params, { expiresStartTime: new Date().getTime() });
localStorage.setItem(key, JSON.stringify(data));
} else {
if (value instanceof Object || Array.isArray(value)) {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
}
},
/**
* セッションストレージ取得
* @param {string} key キー
* @returns {string} セッションストレージデータ
*/
get(key) {
let item = localStorage.getItem(key);
try {
item = JSON.parse(item);
} catch (error) {
console.error(error);
}
// 有効期間チェック
if (item && item.expiresStartTime) {
// 失効
if (new Date().getTime() - item.expiresStartTime > item.expires) {
localStorage.removeItem(key);
return false;
} else {
return item.value;
}
} else {
return item;
}
},
/**
* セッションストレージ削除
* @param {string} key キー
*/
remove(key) {
localStorage.removeItem(key);
},
/**
* セッションストレージをクリア
*/
clear() {
localStorage.clear();
}
}
3.参考
Window: sessionStorage プロパティ - Web API | MDN
Window: localStorage プロパティ - Web API | MDN