この文章は前の文章(Cookie理論知識)の実践的な理解です.
完全コード:
完全コード
Cookie登録時の作用過程:
登録する
登録時にアカウントのパスワードをデータベースに書き込みます.
ログイン
最初のログイン時には、サーバがブラウザにCookieを送信します.
バックグラウンドの登録ルートコード(nodejs):

else if (path === '/sign_in' && method === 'POST') {
        readBody(request).then((body) => {
            let strings = body.split('&') // ['email=1', 'password=2', 'password_confirmation=3']
            let hash = {}
            strings.forEach((string) => {
                // string == 'email=1'
                let parts = string.split('=') // ['email', '1']
                let key = parts[0]
                let value = parts[1]
                hash[key] = decodeURIComponent(value) // hash['email'] = '1'
            })
            let {
                email,
                password
            } = hash
            var users = fs.readFileSync('./db/users', 'utf8')
            try {
                users = JSON.parse(users) // []
            } catch (exception) {
                users = []
            }
            let found
            for (let i = 0; i < users.length; i++) {
                if (users[i].email === email && users[i].password === password) {
                    found = true
                    break
                }
            }
            if (found) {//     ,    ,    Cookie      ,           
                response.setHeader('Set-Cookie', `sign_in_email=${email}`)
                response.statusCode = 200
            } else {
                response.statusCode = 401
            }
            response.end()
        })
    }

ログインが成功した瞬間に、バックグラウンドにCookieを設置し、ログインしたユーザIDを記録してから、ブラウザに応答して、例えばサーバ端に応答ヘッダを設定します.set-cookies：[email protected].
その時は応答を確認します.
応答ヘッダがクッキーに設定されていることが分かりました.
ホームページにジャンプします.この時はホームページにジャンプしてください.
ホームページにジャンプする要求ヘッダにクッキーフィールドが含まれていることが分かりました.だから、前の文章のように、
サーバーがブラウザにsetcookieの応答ヘッダを与えたら、このブラウザ以降のすべての要求は同じソース(つまり前回Cookieを送ったドメイン名とドメイン名とポートが同じ)であれば、その時点でサーバをこのビューに送信したCookieを持っています.
以後、ブラウザがこのパスにアクセスすると、ブラウザはこのCookieを添付してサーバーに送信します.
すなわち、最初の要求では、サーバがブラウザのためにCookieを設定しています.次回の要求では、ブラウザがCookieを持ってサーバに送信します.初めて登録したときに、サーバがブラウザへの応答にCookieを設定し、set-cookies：[email protected]を設定して、ブラウザが次に要求するときに、Cookieの中でUser_という有名なことが分かりました.emailのCookie、そして私が要求したドメイン名を送ります.それとも前回Cookieの応答があるドメイン名を送ってくれますか?
再度ログインする必要はありません.サーバがブラウザに入場券を送ったのに相当します.次のブラウザはサーバーに入る時にサーバーにチケットを見せてください.
楽屋でCookieを読み込み、登録状態を保持し、Cookieを削除してログイン状態を終了します.
トップページのコード:

    
    
    

          する
        ログイン
    
    
    
     :__status__
    
       :__email__
    
     :__password__

    ログアウト（クッキーの  ）



logOffBtn.addEventListener("click", () => {
        //        Cookie      ，     expires          。
        document.cookie = 'sign_in_email=;expires=Thu, 01-Jan-1970 00:00:01 GMT'
        window.location = "/"
    })

バックグラウンドルーティングコード

if (path === '/') {
        response.statusCode = 200
        let string = fs.readFileSync('./index.html')
        string = string.toString();
        var users = fs.readFileSync('./db/users', 'utf8')
        users = JSON.parse(users)//   user    

        console.log(users);
        let cookies = request.headers.cookie || ''//['email=111', 'asdasd=111']
        cookies = cookies.split("; ")
        let hash={}
        cookies.forEach((string)=>{
            let parts = string.split("=")
            let key = parts[0]
            let value = parts[1]
            hash[key] = value;
        })
        
        let eamil = hash.sign_in_email
        let foundedUser
        users.forEach((userObj)=>{
            if(userObj.email===eamil){
                foundedUser = userObj;
            }
        })
        console.log(foundedUser);
        if(foundedUser){
            string = string.replace('__status__', '   ')
            string = string.replace('__email__', foundedUser.email)
            string = string.replace('__password__', foundedUser.password)
        }else{
            string = string.replace('__status__', '   ,    ')
            string = string.replace('__email__', ' ')
            string = string.replace('__password__', ' ')
        }
        
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write(string)
        response.end()
    }

Cookieがない時、トップページの状態
ログイン後、楽屋はCookieクエリーデータベースに基づいて、ユーザー名とパスワードをフロントのトップページにアップロードします.
登録を終了するとCookieを削除し、ページを更新し、未登録の状態に戻ります.
Cookie登録時の特徴
私たちはCookieの特徴を得ました.

初めてログインしたとき、サーバはSet-Cookieレスポンスヘッダを介してCookieを設定し、その後、応答としてブラウザ

に送信する.

ブラウザが応答中のCookieを取得した後、このドメイン名を要求するたびに、このCookie

を持参する.

の後、サーバーが設定したCookieを読み取り、ログインユーザの情報を知る.

Cookieに関するいくつかの問題
1.私はChromeに登録してCookieを得て、Safariで訪問しますが、SafariはCookieを持ってきますか?no
2.CookieはどのWindowsにC盤のファイルがありますか?
3.Cookieはユーザーによって改竄されますか?例えば、Googleブラウザ開発者モードのappication->Cookieで手動で修正できます.修正した後、次回要求を送る時に、添付されるのは修正後のCookieです.
JSには、クッキーを操作できるアプリもあります.(他のユーザーのアカウントに変更すれば、ログインできます.リスク問題があります.Sessionはこの問題を解決し、ユーザーの改竄を防止します.)後端は、Cookieの属性をHttponlyに設定すればいいです.具体的な文法はMDN 4.Cookieの有効期間を見ますか?デフォルトの有効期限は20分ぐらいです.ブラウザのポリシーが違っています.(ブラウザがずっと開いていると、Cookieは削除されません.ブラウザを閉じると、ブラウザは安全を考慮するために、20分ぐらいでCookieを削除する可能性があります.これはサーバがどのようにCookieの有効期限を設定するかにもよります.)バックエンドは有効期限を強制的に設定できます.具体的な文法はMDNCOkieを見て同源の策略を守りますか?ありますが、AJAXとの同ソース戦略はちょっと違います.Qq.com下のリソースを要求すると、ブラウザはq.com対応のCookieをデフォルトで持参し、baidu.com対応のCookieを持ってこない.v.qq.com下のリソースを要求すると、ブラウザはv.q.comのCookieを持参するだけでなく、q.comのCookieを持参することもできます.
注意すべき細かい問題
なぜ前後にフォーム検証が必要ですか?
前と後のいずれもメールボックスのフォーマットが正しいか、アカウントのパスワードフォーマットが正しいか、2回提出したパスワードが同じかなどを確認します.ハッカーは、フロントエンドのjs検証プロセスをバイパスすることができるので、例えば、ハッカーは、直接にcurlを使用して要求の送信を行い、直接にバックグラウンドサーバと対話することができる.図のように:
したがって、バックグラウンドもフォーム検証が必要です.
Cookieはどうやって手動で閉じますか?
翻訳
クッキーcache-control:キャッシュ制御