Help us understand the problem. What is going on with this article?

Local環境でのCookie / WebStorage 挙動

はじめに

Local環境にてHTMLコンテンツを動かし複数のHTMLを使うために、データを保存する方法を模索しているときに、「Local環境でのCookie / WebStorage 挙動」について勉強になったのでまとめました。
まとめられたものが少なかったため、他の人に役立てばなと思っています。

関連リンク

関連リンクを下記に載せておくので、参考にしてください。。

検証方法

Cookie と WebStorage のそれぞれの検証用HTMLを各ブラウザでロードして、開発者ツールのコンソールにて期待する動作をするかどうか確認しました。

  • Macbook Pro 15(2019)
  • Windows10 Pro

検証結果

さっそく、検証した結果を表にまとめました。
結論としては、Cookieはlocal環境での使用を想定されていないものの、ブラウザによっては使用可能ということがわかりました。
今回は3つのブラウザでのみ検証をしておりますが、他のブラウザでの検証を実施したい場合は、下記の検証用HTMLを使って検証したいブラウザで表示させてみてください。

IE chrome safari
cookie ×
sessionStorage
localStorage
  • ◯ ・・・ 使用可能
  • × ・・・ 使用不可

検証用HTML

Cookieの検証をする時は、2回ロードしてください。
(1回目でCookieへの書き込み、2回目でCookieの読み込みをしています。)

cookie_check.html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Cookie test</title>
  </head>
  <body>

    <script type="text/javascript">

      function enable_check(){

        // キャッシュがあるか
        if(document.cookie !== ""){
          console.log("ある");
          var w = document.cookie.split( '; ' );
          alert(w);
        } else {
        // なければ作成
          var expire = new Date();
          expire.setTime( expire.getTime() + 1000 * 60 );

          document.cookie = 'data=123;expires=' + expire.toUTCString();
          document.cookie = 'data2=abc;expires=' + expire.toUTCString();
          console.log("ない");
        }
      }

      enable_check();
    </script>

  </body>
</html>


webstorage_check.html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>WebSession test</title>
  </head>
  <body>

    <script type="text/javascript">

      function enable_check(){

      // LocalStrage対応してる?
        if ( typeof(Storage) === "undefined" ) {
          alert('not support');
        } else {
          console.log('Support');
        }
      }

      enable_check();
    </script>

  </body>
</html>

まとめ

ブラウザはlocal環境での動作保証はしていないはずですので、使用するときには各自検証の上で利用可否の判断をお願いします。
とはいえ、この内容が誰かの役に立てばいいなと思っています。

参考

https://teratail.com/questions/101774
https://qiita.com/uralogical/items/ade858ccfa164d164a3b
http://www.htmq.com/webstorage/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした