JSでブラウザにデータを保存する(store.js)

概要

ローカルストレージを使ってブラウザにデータを保存する方法のうち、
store.js というライブラリを使う方法を説明する。

ローカルストレージとは、端末のブラウザにデータを保存する仕組みのことで、サーバーとの通信なしでユーザーのデータを利用できる。
同端末の他ブラウザや、他端末のブラウザからデータを操作することはできない。

store.jsについて

ローカルストレージは、キーと値の組み合わせでデータを保存する。

もともとJavaScriptにはlocalStorage APIがあるが、これは文字列しか保存できない。

しかし、store.jsを使うとオブジェクトをJSONに変換して保存してくれる。

ただし、保存できる上限がサイト毎に決められているため、大きなデータを処理するのには向いていない。

入手先
https://github.com/marcuswestin/store.js/

基本的な利用方法

store.jsをダウンロード、または直接読み込みをしたあと、次のように利用できる。

データの保存

store.set("key","data");

var key="people";
var data={name:"Ken",old:16};
store.set(key,data);

この時、キーの値が被らないように注意。
キーがかぶるとデータが上書きされる。
上書き保存が必要な場合は同じキーに保存すればよい。

データの取得

store.get("key");

var data = store.get("people");

変数に格納すると使いやすい。

データの削除

//一つを削除
store.remove("key");

//全て削除
store.clearAll();

これがわかっていれば基本的に扱えます。

具体例

IDとパスワードを入力してからデータを取得できるようにする方法

function onLoad(){
  /*ロード時に保存したデータのIDをまとめたdatasが存在しているか確かめる。なければ新しく作る。*/
  try{
    var x=store.get("datas").length;
  }catch(e){
    var user_ids=["datas"];
    store.set("datas",user_ids);
  }
}

function new_data(){

  /*新しいデータを保存する*/
  var data = {};
  user_id=prompt("登録したいユーザーIDを入力してください");
  if(user_id){

    /*すでに使用したIDでないことを確認*/
    var id_datas=store.get("datas");
    var result=id_datas.some(function(value){
      return value===user_id;
    })
    if(result){
      alert("既に存在するIDです");
      arguments.callee();
    }else{

      /*パスワードを設定してdataを保存する*/
      pass=prompt("登録したいパスワードを入力してください");
      store.set(user_id,pass);
      store.set(user_id+"_"+pass,data);
      id_datas.push(user_id);
      store.set("datas",id_datas);

      /*dataを取得する*/
      user_data=store.get(user_id+"_"+pass);
    }
  }
}

function load(){

  /*保存したデータをロードする*/
  user_id=prompt("ユーザーIDを入力してください");
  if(user_id){

    /*datasの中に入力されたIDが存在するかを確認*/
    var id_datas=store.get("datas");
    var result=id_datas.some(function(value){
      return value===user_id;
    })
    if(result){

      /*パスワードを入力して、あっていればデータを取得する*/
      pass=prompt("パスワードを入力してください");
      if(pass){
        if(pass==store.get(user_id)){
          user_data=store.get(user_id+"_"+pass);
        }else{
          alert("そのユーザIDは存在しません");
          arguments.callee();
        }
      }
    }else{
      alert("そのユーザIDは存在しません")
      arguments.callee()
    }
  }
}

/*//データが保存されているかを確認するときに使う
function plus(){
  user_data.name="うまるちゃん"
  user_data.bag="コーラ"
}*/

/*データを上書き保存する*/
function save(){
  var result=confirm("セーブしますか？")
  if(result){
    store.set(user_id+"_"+pass,user_data)
  }
}

/*IDの全削除*/
function remove(){
  store.remove("datas")
}

※大切な情報はこの方法で保存しないほうがいいと思います。

少し文法解説
promptは変数に代入して、入力されたかされてないかで判定することが多い。

function showInputText(){
  var input=prompt("表示される文章");
  if(input){
    /*入力があればinputがtrueを返すのでこちらが実行される*/
    alert(input);
  else{
    /*入力がないときはinputはfalseを返す*/
    alert("入力なし")
    /*arguments.callee()で同じ関数(showInputText)を繰り返す*/
    arguments.callee();
  }
}

まとめ

store.jsはlocalStorageでオブジェクトを扱えるようにしたもの

サーバー通信不要

あまりにも多くのデータを保存するのには向いていない

非常に簡単に使えるので、軽く保存したい時に使いやすい

最後に

今回はstore.jsを紹介しました。主に自分用のメモですが。

初めての記事で至らぬ点も多いと思いますので、コメントお願いします
また、コードについても初心者が頭を捻らせながら作ったものなので、簡略化できる方法や書き方の慣習などがあればぜひ教えてください！

最後までありがとうございました。