search

yudukiak / gbf_Summon

グラブルのサポーター専用召喚石を画像化＆ツイートできる「フレ石編成的ななにか」です。
https://prfac.com/gbf/summon/
MIT License
13 stars 0 forks source link

Cookieの保存方法を変更する #4

Closed yudukiak closed 6 years ago

yudukiak commented 6 years ago

変更前

変更後

注意点

yudukiak commented 6 years ago

JavaScriptの予定

  1. Cookieが保存できるかをチェック true : 2の処理へ false : アラートを出す
  2. 前回保存したCookieがあるかチェック true : 3の処理へ false : デフォルトを表示
  3. 前回保存したCookieの情報で処理するか true : 設定を表示 false : デフォルトを表示
yudukiak commented 6 years ago

サンプル

script.js

$(function(){
  // --------------------------------------------------------
  // JavaScriptによるcookieが有効か無効かの判定
  // https://qiita.com/tatsuyankmura/items/8e09cbd5ee418d35f169
  // --------------------------------------------------------
  var setCookie = function(cookieName, value, expire){
    var cookie = cookieName+"="+value+";";
    if(Number(expire) > 0){cookie += 'expires='+expire;}
    document.cookie = cookie;
  }
  var getCookie = function(cookieName){
    var l = cookieName.length+1;
    var cookieAry = document.cookie.split("; ");
    var str = "";
    for(i=0,j=cookieAry.length; i<j; i++){
      if(cookieAry[i].substr(0,l) === cookieName+"="){
        str = cookieAry[i].substr(l,cookieAry[i].length);
        break;
      }
    }
    return str;
  }
  // --------------------------------------------------------
  // 処理
  // --------------------------------------------------------
  setCookie('ck_cookie', true);
  var checkCookie = getCookie('ck_cookie');
  if(checkCookie){
    //cookie 有効
    var checkCookie = getCookie('st_key');
    console.log(checkCookie);
  } else {
    //cookie 無効
    alert('Cookieが無効になっています。\n有効にすると設定内容を保存できます。');
  }
  $('#save_json').on('click', function (){
    // Cookieを保存
    var expire = new Date(Date.now()+1*365*24*60*60*1000); // 365日保持させる
    var settingJson = '{"type1":[{"type":"type1","rarity":"ssr","id":"2040244000","rank":"rank0"}],"type2":[{"type":"type2","rarity":"ssr","id":"2040243000","rank":"rank0"}],"type3":[{"type":"type3","rarity":"ssr","id":"2040237000","rank":"rank0"}],"type4":[{"type":"type4","rarity":"ssr","id":"2040239000","rank":"rank0"}],"type5":[{"type":"type5","rarity":"ssr","id":"2040242000","rank":"rank0"}],"type6":[{"type":"type6","rarity":"ssr","id":"2040238000","rank":"rank0"}],"type7":[{"type":"type1","rarity":"ssr","id":"2040240000","rank":"rank0"}],"type8":[{"type":"type2","rarity":"ssr","id":"3040138000","rank":"rank0"}],"type9":[{"type":"Djeeta","rarity":"c1","id":"120001_wa","rank":"rank0"}],"setting":[{"chara":true,"text":"いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひも","user":"1234567890"}]}';
    var settingJson_e = encodeURIComponent(settingJson);
    setCookie('st_key', settingJson_e, expire);
  });
  $('#delete_json').on('click', function (){
    setCookie('st_key', '');
  });
});

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <h1 id="msg">Hello JavaScrit</h1>
    <div class="box">
        <div class="type1"></div>
        <div class="type2"></div>
        <div class="type3"></div>
        <div class="type4"></div>
        <div class="type5"></div>
        <div class="type6"></div>
        <div class="type7"></div>
        <div class="type8"></div>
        <div class="type9"></div>
    </div>
    <p><button id="save_json">JSONのCookieを保存する</button></p>
    <p><button id="delete_json">JSONのCookieを削除する</button></p>
</body>
</html>

問題点

Q. Cookieの保持期間が 1年後+9時間 になってしまう A. こまけぇこたぁいいんだよ！！

yudukiak commented 6 years ago

JSONの作成例

aryCookie = [];
for(i=0,j=4; i<j; i++){
    var objCookie = {};
    var cRed = "赤"+i,
        cGrn = "緑"+i,
        cBlu = "青"+i;
    objCookie.red   = cRed;
    objCookie.green = cGrn;
    objCookie.blue  = cBlu;
    aryCookie.push(objCookie);
}
console.log(JSON.stringify(aryCookie));

JSON

[{"red":"赤0","green":"緑0","blue":"青0"},{"red":"赤1","green":"緑1","blue":"青1"},{"red":"赤2","green":"緑2","blue":"青2"},{"red":"赤3","green":"緑3","blue":"青3"}]

yudukiak commented 6 years ago

Q. Cookieの保持期間が 1年後+9時間 になってしまう A. expire.toGMTString();で解決した

IEではGMTString 形式の日付でないとセッションクッキー状態になってしまうようだ https://developer.mozilla.org/ja/docs/Web/API/Document/cookie