カテゴリー
開発関連

Cookieとsessionとローカルストレージと部屋とワイシャツと私

二回目の訪問時は表示させないでってアレ。

久々に入れたので、メッも。最近はよーろっぱの法律(GDPR?)でCookie入ってたらその旨ページにアクセスしてきたユーザーに知らせなきゃ、とか、いろいろめんどくさそうなので、実装に可能ならcookieを使わないほうがいいのかしら、と、localstrage使うかぁ〜と思いつつなんとなく全体的におさらいしてみた。
ちなみに今回はブラウザ閉じてアクセスのたびに復活してほしいとのことだったので最終的にはsessionStrageをつかった。

参考文献URL羅列。

そもそものところをおさらい。
クッキー(Cookie)とセッションとキャッシュの違いは何か? | Promapedia
https://ssaits.jp/promapedia/technology/cookie-session-cache.html
Cookieとセッション管理 – Qiita
https://qiita.com/mogulla3/items/189c99c87a0fc827520e
セッション管理、とセッションは違う・・ややこしい。セッションだけではユーザー情報保持ができないためセッション情報の管理にクッキーを使う・・・ややこしい。
そのあたりを一個目のURLでまとめてくれている。便利。ウェッブ!
GDPRで明記しなきゃ云々も最初のURLにのせてくれていた。ありがたい!まっとめ!!

LocalStorage? sessionStorage?

ローカルストレージでやっかぁ〜と思ったらsessionStorageてあるやん。今回はこちらが手間なくてよいね、というわけで実装。使い方はほぼCookieと同様のながれ(チェック→保存→呼び出し)
LocalStorage, sessionStorage
https://ja.javascript.info/localstorage
sessionStorageをつかってみる – Qiita
https://qiita.com/uralogical/items/ade858ccfa164d164a3b
JavaScriptのsessionStorageの使い方を現役エンジニアが解説 | TechAcademyマガジン
https://techacademy.jp/magazine/32870

大体のコード

import gsap from 'gsap';
const imagesLoaded = require('imagesloaded');
import {handleTouchMove} from './handleTouchMove';
import {checkScrollInElem} from './checkScrollInElem';

const imagesReady = () => {
    return new Promise(resolve => {
        imagesLoaded( '#wrapper', resolve );
    });
};
//show
function startSplash() {
    //スクロール禁止
    document.addEventListener('touchmove', handleTouchMove, { passive: false });
    document.addEventListener('mousewheel', handleTouchMove, { passive: false });
    //スプラッシュ
    const isHome = document.body.classList.contains('home');
    isHome && gsap.set(".jsHeroFadeIn", { y:10, autoAlpha: 0 });
    (async () => {
        await imagesReady();
            var tl = gsap.timeline().pause();
            tl.to("#opening", {  opacity: 0, duration: 0.6, display:'none',
            onComplete:function(){
                isHome && gsap.to(".jsHeroFadeIn", { duration:0.8, y:0, autoAlpha:1, ease: "power2.out", stagger:0.4});
                //スクロール復帰
                document.removeEventListener('touchmove', handleTouchMove, { passive: false });
                document.removeEventListener('mousewheel', handleTouchMove, { passive: false });
                checkScrollInElem();
            }},"end");
            tl.play();
            sessionStorage.setItem('visited', 'already');
    })();
}

//skip
function passSplash() {
    //some codes here
}

export function handleSplashThenScrollInElem() {
    const visited = sessionStorage.getItem('visited');
    visited ? passSplash():startSplash();
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください