Edited at

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

More than 5 years have passed since last update.

ブラウザのローカルで 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 チェック(コメント頂いたので直す)