WebStorageを使用する
WebStorageが使えるかどうかの確認
例えば Safari はプライベートブラウジングモードでは、容量が 0 で空のローカルストレージを提供しますので、事実上使用できません。逆に、正規の QuotaExceededError が発生した場合、これはストレージ領域を使い切ったことを意味しますが、ストレージは実際に利用可能です。機能検出時には、これらのシナリオを考慮に入れるべきです。
コード例が載っているけど、DOMExceptionはserver側で実行するとerrorになるので注意
実装例
try..catchをどこに使うか
便利関数のメモ
その他考慮すること
SSG, server側での処理
Repository層に書くべき
Cookieに対しては無闇にこのようには書けない
sub domainのサイトも見ることがありうるので、無闇に{value: 'hoge'}のようにできない
構造が変わる
code:ts
export function storageAvailable(type: 'sessionStorage' | 'localStorage') {
const isClient = typeof window !== 'undefined';
if (!isClient) {
return false;
}
const storage = windowtype; try {
const x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
} catch (e) {
return false;
}
}
code:ts
import { storageAvailable } from 'app/src/features/storages/storageAvailable';
type Value<V> = {
value: V;
};
export const manageSessionStorage = <V>(sessionKey: string) => {
const isAvailable = storageAvailable('sessionStorage');
const set = (value: V) => {
if (isAvailable) {
// primitive型もJSONにしてからsetする
const setValue: Value<V> = { value };
sessionStorage.setItem(sessionKey, JSON.stringify(setValue));
}
};
const remove = () => {
if (isAvailable) {
sessionStorage.removeItem(sessionKey);
}
};
const get = () => {
if (!isAvailable) {
return null;
}
const items = sessionStorage.getItem(sessionKey);
if (items == null) {
return null;
}
try {
const result: Value<V> = JSON.parse(items);
return result.value as V;
} catch (e) {
return null;
}
};
return { set, get, remove };
};