はじめに
Local環境にてHTMLコンテンツを動かし複数のHTMLを使うために、データを保存する方法を模索しているときに、「Local環境でのCookie / WebStorage 挙動」について勉強になったのでまとめました。
まとめられたものが少なかったため、他の人に役立てばなと思っています。
関連リンク
関連リンクを下記に載せておくので、参考にしてください。。
- WebStorage と Cookie の違い
- Local上にて複数のHTMLコンテンツのデータを共有する方法（Store.js）
- Local環境のXMLファイルからJavascriptを使って情報を取得する方法
検証方法
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/