jsのcookiesおよびhtml 5のlocalStorage、sessionStorage

2656 ワード

1、まず、クッキーとは何かを理解しますか?
cookies:クライアントに格納され、データ量が小さく、期限切れのデータが文字列形式で格納されます.
クッキー操作コードの例:
    
        window.onload = function() {
            function setCookie(name, value, time) {
                var oDate = new Date();
                oDate.setDate(oDate.getDate() + time);
                document.cookie = `${name}=${value};path=/;expires=${oDate}`;
            }

            function getCookie(name) {
                var str = document.cookie;
                var arr = str.split(';');
                for (let i = 0; i < arr.length; i++) {
                    var arr2 = arr[i].split('=');
                    if (arr2[0] == name) {
                        return arr2[1];
                    }
                }
                return '';
            }

            // function removeCookie(name) {
            //     setCookie(name, '', -1);
            // }
            setCookie('username', 'zxq', 2);
            setCookie('SameSite', 'Lax', 2);
            removeCookie('SameSite', '', -1);
            console.log(getCookie('username')) //'zxq'
        }
    

2、localStorage及びsessionStorage
session:サービス側にキー値ペアで格納されたデータlocalStorageおよびsessionStorage:クライアントにキー値ペアで格納されたデータ
操作例:
    
        window.onload = function() {
            sessionStorage.setItem('use', 'zxq');
            console.log(sessionStorage.getItem('use')); //'zxq'
            // sessionStorage.removeItem('use');
            // //sessionStorage.clear();//    
            localStorage.setItem('username', 'zxq');
            console.log(localStorage.getItem('username')); //'zxq'
            // localStorage.removeItem('username');
            // localStorage.clear();
        }
    

3、クッキーとlocalStorageとsessionStorageの違い
  • cookieは期限が切れ、データが小さく、url要求のたびにcookies情報を携帯し、同源ウィンドウは
  • にアクセスする.
  • localStorageデータはcookiesより大きく、クライアントはストレージを永続化し、url要求は携帯せず、同源ウィンドウは
  • にアクセスする.
  • sessionStorageはlocalStorageと似ていますが、有効時間はセッション期間であり、現在のブラウザのウィンドウでのみデータを共有できます.
    4、実戦、sessionStorageでトップページをシミュレートしてログイン機能を検証する
    部分コード:
                if(this.loginForm.username != sessionStorage.getItem('username')){
                    alert('       !')
                }else if(this.loginForm.password != sessionStorage.getItem('password')){
                    alert('        !')
                }else{
                    this.$router.push({path:'/',query:{username:this.loginForm.username}})
                }

    githubアドレス:[https://github.com/Zxq-zn/vuemanager/tree/master/src/components/login]