LoginSignup
8
8

More than 5 years have passed since last update.

ブラウザのローカルで I/O めも

Last updated at Posted at 2014-05-26

ブラウザのローカルで I/O めも

目的

  • ブラウザのローカルを DB として使う時のめも。

背景

業務でブラウザにデータを出入力する必要があり、localStorage と Cookie どちらをつかうかの変更がしょっちゅう起こる。使う Strage のタイプによって、コード全体への影響範囲を最小限にしたい。

やりたいこと

  • ブラウザからデータを get/set したい
  • 使用する Strage の種類に変更があっても、他のコードへの依存を減らしたい。

書いた

(追記) コードがひどい、とご指摘してもらえたのでリファクタしてみました。

※ 依存ライブラリは underscorejquery-cookie の 2 つ。

db.coffee
root = @
$.cookie.json = true

storage = root.storage = (strageType) -> 
  switch strageType
    when 'localstorage'
      return {
        setItem: (key, val) -> 
          if arguments.length < 2
            return throw new Error('arguments number is not enough.')
          if not _.isString(val)
            val = JSON.stringify(val)
          localStorage.setItem(key, val)
        getItem: (key) ->
          data = localStorage.getItem(key)
          try
            parseData = JSON.parse(data)
            return parseData
          catch
            return data
        removeItem: (key) -> localStorage.removeItem(key)
      }
    when 'cookie'
      return {
        period: 7
        setItem: (key, val) -> 
          if arguments.length < 2
            return throw new Error('arguments number is not enough.')
          $.cookie(key, val, {expires: period, path: '/'})
        getItem: (key) -> return $.cookie(key)
        removeItem: (key) -> $.removeCookie(key)
      }
    else
      throw new Error('this strageType is invalid.')

使い方

## localStorage に user キーでデータを保存
db = storage('localstrage')
db.setItem('user', {'id': 1, 'u_name': 'foo', 'u_items': [1,2,0,3]})

## 取り出し
db.getItem('user')  
## object 型で取り出される
## {'id': 1, 'u_name': 'foo', 'u_items': [1,2,0,3]}

## 削除
db.removeItem('user')

## Boolean 型
db.setItem('flg', true)
db.getItem('flg')

## Number 型で取り出し
db.setItem('counter', 10)
db.getItem('counter')

Cookie を使う場合は DB のタイプを宣言してから使う. 有効期限はデフォルトで 7 日間.

## cookie を使う
db = storage('cookie')
## 有効期限を 10 日とする.
db.period = 10

やっていること

使用者は get, set のみさえできればいいので, 余計に考えなくていいように抽象化している.

  • この strage モジュールはグローバル変数として束縛されるのでどこからも呼び出し可能.
  • データの保存先の種類に依存せず I/O できる.(localStorage でも cookie でも使うメソッドは同じ)
  • I/O するデータの型を問わない.(どの型で set しても良い, get すると適切な型に変換された状態で取り出せる)

できないこと

  • localStorage または cookie どちらかしか使えない.
  • strage という名前に別の値を代入された名前空間では使えない.

TODO

null チェック(コメント頂いたので直す)

8
8
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8