cookieandlocalStorage

最新推荐文章于 2025-03-26 19:32:15 发布

Allocator

最新推荐文章于 2025-03-26 19:32:15 发布

阅读量786

点赞数 1

CC 4.0 BY-SA版权

文章标签： cookie http协议 web开发存储

本文链接：https://blog.youkuaiyun.com/Allocator/article/details/52888543

本文深入探讨了客户端存储技术，包括cookie的基本格式、字段说明及示例，以及localStorage的使用方法和API介绍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

存储技术Cookie and localStorage
- cookie
- localStorage

存储技术Cookie and localStorage

在web开发过程中，由于http协议是短的无状态的连接，每一次请求响应过程都是独立的。为了让每一次http请求产生关联，共享某一些数据，需要对请求过程中的某些数据进行存储，并在以后的http请求中能够使用这些数据。客户端有cookie技术服务端有session技术来完成这个需求。这次主要讲解客户端相关的cookie技术以及纯客户端localStorage技术。

cookie是存放在客户端的小量数据，以键值对的形式进行存储；每个键值对以分号隔开。其中cookie具有标准的格式，cookie的基本格式如下：

其中有非常重要的字段(在cookie里面必须写在第一位)NAME=VALUE这个K/V值是必填值。NAME是cookie的名字，VALUE就是要进行存储的值，这个值可以是一个简单的字符串，如HELLO=NIHAO HELLO即是cookie的名称NIHAO就是cookie的值。当然存储的VALUE可以是多个值，那么就需要用户自己组织数据的格式，最终以字符串写值，比如HELLO=key1=a&key2=b将两对K/V数据存储到cookie里面。
cookie的第二个字段(没有顺序要求)EXpires指的是cookie的过期时间，当超过这个时间时cookie就会被清理，这个字段存储的时间必须是GMT格式的时间。提到这个字段必须要提到cookie的另外一个字段Max-Age这个字段以秒存储cookie的生命周期，它的功能与Expires类似。推荐使用Max-Age替代Expries。如果定义cookie时没有写这个字段，那么默认情况下cookie不会存储在硬盘里面，浏览器窗口关闭这个cookie会被清除。
cookie的第三个字段(没有顺序要求)Domain域。表示访问这个域下的url时，cookie才能够被读取。这个字段缺省值为往浏览器写这个cookie的服务器域名。
下一个字段Path路径，表示访问这个满足这个路径的资源时cookie才能够被读取。path和domain可以设置可访问cookie的有效资源路径。
还有连个与安全相关的字段，他们不需要设置值，使用时添加到cookie里面当标签即可。
Secure:使用这个字段时，当浏览器以加密协议访问服务器资源时，cookie才能够被访问。目前也就是https
HttpOnly:顾名思义，只有使用http协议时，才能够通过程序获取cookie。这个时候想通过客户端javascript获取cookie会失败。
下面用nodejs往浏览器写一个简单的cookie

var http = require('http');
http.createServer(function(req,res){
    var maxage = 10*24*60*60;//生命期为10天
    var expires = new Date((new Date()).getTime()+10*24*60*60*1000).toUTCString();

    res.writeHead(200,{
        'Set-Cookie':'ABC=123;Max-Age='+maxage+';'+'Expires='+expires+';Path=/;'+'Secure;HttpOnly',
        'Content-Type':'text/html'
    });
    res.end('ok');

}).listen(3000,'127.0.0.1');
console.log('server is on');

上面的’Set-Cookie’属性的值即是往浏览器写的cookie。当server启动，通过浏览器(chrome)访问之后就能够得到cookie。通过chrome可以查看这个cookie内容如下:

可以看到与服务端写的cookie内容一致。

localStorage

这个是纯客户端的存储技术。localStorage是window对象的一个属性(window.localStorage)。使用localStorage需要熟悉它的API。用的比较多的就是setItem()存入键值对，getItem()获取某一个键的值，removeItem()清除某一个键值对，clear()清除所有键值对，key(n)获取某一个键值对的键，这个可以用来遍历localStorage。有一个点需要注意localStorage存储的值是string。所以要进行计算时需要使用parseInt 以及parseFloat进行转换。
下面写一段脚粗略本计算网页刷新次数。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>网页刷新</title>
        <script>
            window.onload = function(){
                if(!window.localStorage.getItem('num')) window.localStorage.setItem('num',0);
                window.localStorage.setItem('num',parseInt(window.localStorage.getItem('num'))+1);
                document.getElementById('times').innerHTML = window.localStorage.getItem('num');
                document.getElementById('time').innerHTML = new Date().toUTCString();
            }
        </script>
    </head>
    <body>
        <div>网页刷新<span id="times"></span>次</div>
        <div>刷新时间<span id="time"></span>
    </body>
</html>

运行效果: