pico-cookieでdocument.cookieをオブジェクトにマップする

document.cookieをオブジェクトにマップするpico-cookieを作った。

同様のライブラリとしてjs-cookie/jsがあるがメソッドを呼ばずにアクセスしたかったり普通にイテレーションできるようにしたかった。

単にdocument.cookieを読み取り専用のオブジェクトにマップするだけならECMAScript® 2019のObject.fromEntries()を使うと簡単だ。

const cookie = Object.fromEntries(
  document.cookie.split(';').map(
    entry => entry.split('=').map(e => decodeURIComponent(e.trim()))
  )
)

これにProxyを組み合わせればオブジェクトに対する操作をdocument.cookieに反映できる。

動作条件

  • Chrome 73+
  • Edge 79+
  • Firefox 63+
  • Safari 12.1+
  • Opera 60+
  • Internet Explorerは非対応

使い方

<script src="pico-cookie.js"></script>

// document.cookie is mapped to cookie
document.cookie  // "SESSIONID=04ecb3d1b; APISID=ed724274d"
cookie           // { SESSIONID: "04ecb3d1b", APISID: "ed724274d" }

// Read
cookie.SESSIONID // "04ecb3d1b"
cookie.APISID    // "ed724274d"

// Update
cookie.SESSIONID = 'abcd'
cookie           // { SESSIONID: "abcd", APISID: "ed724274d" }
document.cookie  // "SESSIONID=abcd; APISID=ed724274d"

// Add
cookie.NEWKEY = 'NEWVALUE'
cookie           // { SESSIONID: "abcd", APISID: "ed724274d", NEWKEY: "NEWVALUE" }
document.cookie  // "SESSIONID=abcd; APISID=ed724274d; NEWKEY=NEWVALUE"

// Delete
delete cookie.NEWKEY
cookie           // { SESSIONID: "abcd", APISID: "ed724274d" }
document.cookie  // "SESSIONID=abcd; APISID=ed724274d"

// Attributes
cookie.put('KEY', 'VALUE', { samesite: 'strict' }) // returns cookie itself

// You can apply any methods same as plain object...
Object.keys(cookie) // ["SESSIONID", "APISID", "NEWKEY"]

for (const [key, value] of Object.entries(cookie)) {
  console.log(key, value)
}