Cookies, Session Storage, Local Storage

最新推荐文章于 2022-09-09 11:42:22 发布

L的博客

最新推荐文章于 2022-09-09 11:42:22 发布

阅读量172

点赞数

分类专栏：浏览器本地存储

本文链接：https://blog.csdn.net/weixin_42194517/article/details/103857199

版权

浏览器本地存储专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Cookies, Session Storage, Local Storage 三者间区别

	Cookies	Session Storage	Local Storage
存储数据量	4kb	10mb	5mb
浏览器	HTML4/HTML5	HTML5	HTML5
来源	任何窗口(同源)	任何窗口(同源)	同一个窗口
期限	自定义	永久	当窗口关闭
存储位置	浏览器和服务器	浏览器	浏览器
和HTTP请求一块发送?	是	否	否

注意:

cookie 随 HTTP 请求一块发送, localStorage 是本地存储, sessionStorage 是会话存储

localStorage 是同步的,阻塞应用程序

以下是Cookies, Session Storage, Local Storage 的小例子

1. Cookies 用法

node.js 服务端代码:

var express = require("express");
var bodyParser = require('body-parser')
var cookieParser = require('cookie-parser');
var app = express();
app.engine('html', require('express-art-template'))

app.use(cookieParser())

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.get('/cookie', function (request, response) {
    response.render('cookie.html')
})

app.post('/CookiesTest', function (request, response) {
    if (!request.headers.cookie) {
        response.cookie("username", request.body.username, { maxAge: 60000, httpOnly: true });
        response.cookie("password", request.body.password, { maxAge: 60000, httpOnly: true });
        return response.end("CookiesTest")
    }
    var Cookies = {}
    request.headers.cookie.split(';').forEach(function (Cookie) {
        var parts = Cookie.split('=');
        Cookies[parts[0].trim()] = (parts[1] || '').trim()
    })
    if (request.body.username == Cookies['username']) {
        if (request.body.password == Cookies['password'])
            response.end(Cookies['username'] + ",欢迎再次登录")
    } else {
        //maxAge为有效时长,单位为毫秒
        response.cookie("username", request.body.username, { maxAge: 60000, httpOnly: true });
        response.cookie("password", request.body.password, { maxAge: 60000, httpOnly: true });
        response.end("CookiesTest")
    }
})

app.listen(3000, function () {
    console.log('app is running at port 3000')
})

浏览器代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    //浏览器端添加Cookie
    function setCookie(key, value, expiretime){//expiretime 为天数或秒
        var expiredate = new Date();
        // expiredate.setDate(expiredate.getDate()+expiretime);
        expiredate.setTime(expiredate.getTime()+expiretime*1000);
        //escape()函数,可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
        //unescape()函数,可对通过escape()编码的字符串进行解码。
        document.cookie = key+"="+escape(value)+((expiredate==null)?"":";expires="+expiredate.toGMTString())
    }
    function CookiesTest() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        if(username ==""|| password == ""){
            return document.getElementById("result").innerText = "用户名或密码不能为空";
        }
        var xhr;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if(xhr.responseText==="CookiesTest"){
                    document.getElementById("result").innerHTML = "首次登录成功!!";
                    //setCookie("username",username,60);//过期时间为一分钟
                    //setCookie("password",password,60);
                }else{
                    document.getElementById("result").innerHTML = xhr.responseText;
                    //setCookie("username",username,60);//过期时间为一分钟
                    //setCookie("password",password,60);
                }
            }
        }
        xhr.open("post", "/CookiesTest", true);    
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("username="+username+"&password="+password);//send方法用来发送请求
    }

</script>

<body>
    用户名:<input id="username" type="text"/><br>
    密码:<input id="password" type="password"/><br>
    <input type="button" value="登录" onclick="CookiesTest()"/><br>
    提示:<span id="result">未登录!!</span>
</body>

</html>

2. Session Storage 用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <span id="result"></span>
</body>
<script>
    // 检测浏览器支持
    if (typeof (Storage) !== "undefined") {//window.sessionStorage
        // 存保存数据
        window.sessionStorage.setItem("key", "value");
        // 读取数据
        document.getElementById("result").innerHTML = sessionStorage.getItem("key");
        // 删除指定键的数据
        // sessionStorage.removeItem("key");
        // 删除所有数据：
        // sessionStorage.clear();
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
</script>

</html>

3. Local Storage 用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <span id="result"></span>
</body>
<script>
    // 检测浏览器支持
    if (typeof (Storage) !== "undefined") {//window.localStorage
        // 存保存数据
        window.localStorage.setItem("key", "value");
        // 读取数据
        document.getElementById("result").innerHTML = localStorage.getItem("key");
        // 删除指定键的数据
        // localStorage.removeItem("key");
        // 删除所有数据：
        // localStorage.clear();
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
</script>

</html>

L的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cookies, Session Storage, Local Storage

Cookies,SessionStorage,LocalStorage三者间区别 Cookies SessionStorage LocalStorage 存储数据量 4kb 10mb 5mb 浏览器 HTML4/HTML5 ...
复制链接

扫一扫