【HTML5】localStorageを使ってローカルPCに連想配列DBを構築する

HTML5で利用できるようになったlocalStorageは
その名の通り、ローカルPCにデータを保存することができます。

しかもセッションやcookieのように期限もないので
これまでWEBアプリではサーバーに保存するしかなかったデータを、
サーバーを使わずにローカルのデータベースに保存することができます。

まずはlocalStorageに対応しているかどうかを確認

function check_ls() {
  return localStorage ? true : false;
}

function check_ls() {

return localStorage ? true : false;

}

次に値の格納・取得ですが、いろんな使い方が用意されています。

私が使うのはもっぱら連想配列です。

連想配列のセット (valが連想配列)

function set_ls(key, val) {
  localStorage.setItem(key, JSON.stringify(val));
}

function set_ls(key, val) {

localStorage.setItem(key, JSON.stringify(val));

}

連想配列の取得

function get_ls(key) {
  return JSON.parse(localStorage.getItem(key));
}

function get_ls(key) {

return JSON.parse(localStorage.getItem(key));

}

これだけで連想配列のデータベースとしていろんな使いかたができると思います。
スマホのアプリでWEBビューを使ってアプリのデータ保存に使うのも面白いですね。

もちろん、ローカルなので他の端末でアクセスするとデータが取得できないという
WEBアプリとしてはあり得なかったデメリットもあります。
ローカルとサーバーで両方DBを持ち、お互いにデータを同期させるなど工夫も必要になります。