Cookieを追加・削除できるサンプルページ

あなたがこのページでブラウザに保存したCookieは

※ Cookieを追加・削除したあとにブラウザを更新すると反映されます。

<p>あなたがこのページでブラウザに保存したCookieは<span id="result"></span></p>
<button id="addCookie">Add cookie</button>
<button id="deleteCookie">Delete cookie</button>

const addCookie = document.getElementById('addCookie')
const deleteCookie = document.getElementById('deleteCookie')

addCookie.addEventListener('click', () => {
  const cookieValue = prompt('CookieNameの値を入力してください。')
  document.cookie = `cookieName=${cookieValue}`
})

deleteCookie.addEventListener('click', () => {
  document.cookie = 'cookieName=; max-age=0'
})

function getCookieValue(cookieName) {
  const allCookies = document.cookie.split(';')

  for (let i = 0; i < allCookies.length; i++) {
    let cookie = allCookies[i]

    while (cookie.charAt(0) === ' ') {
        cookie = cookie.substring(1)
    }

    if (cookie.indexOf(cookieName + '=') === 0) {
        return cookie.substring(cookieName.length + 1, cookie.length)
    }
  }
  return ''
}

const cookieName = getCookieValue('cookieName')
const result = document.getElementById('result')
result.textContent = cookieName ? `「${cookieName}」です。` : 'ありません。'

元記事を表示する