はじめに

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の検証をする時は、２回ロードしてください。
（１回目でCookieへの書き込み、２回目で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/

Local環境でのCookie / WebStorage 挙動

はじめに

関連リンク

検証方法

検証結果

検証用HTML

まとめ

参考