本地数据存储之cookie(1)

最新推荐文章于 2024-05-06 20:34:01 发布

极客研究者

最新推荐文章于 2024-05-06 20:34:01 发布

阅读量355

点赞数

分类专栏：本地存储文章标签： js javascript

本文链接：https://blog.csdn.net/qq_34550459/article/details/105943076

版权

本地存储专栏收录该内容

3 篇文章 0 订阅

订阅专栏

web应用的快速发展,在客户端直接存储用户数据变得越来越重要。最简单、易行的方法是cookie。

cookie的使用:
cookie是保存在客户端系统的一个文本文件,每个cookie文件都与指定web服务器的域中的固定目录相关联
当浏览器向服务器请求该目录下的页面时,关联的cookie信息会随着HTTP请求以头部信息的方式发送给服务器

在客户端可以使用JS读写cookie信息

应用场景:
比如:相关的页面A、B,A页面上使用JS定义的temp变量,保存了对应的数据,然后从A页面跳转到B页面,B页面同样也需要获取此数据,这时A页面中JS定义的全局变量或者静态变量,在页面关闭或者发生页面跳转,数据都将丢失

解决方案:使用cookie保存数据

cookie字符串:
结构:以键值对的形式保存(key=value),键值对与键值对之间用分号分隔

生命周期:在默认状态下,当前会话期有效并存在
一旦结束会话(关闭浏览窗口),cookie信息就会被自动删除

如果长久保存cookie信息,可以设置expires属性,把字符串
“expires=date” 附加到cookie字符串后面
用法:
name=value; expires=date
date为格林威治日期时间(GMT)格式:Sun,30 Apr 2017 00:00:00 UTC

可以使用Date.toGMTString()把时间对象转换为GMT格式。

Demo01:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS之cookie的使用</title>
    <script src="cookieTool.js"></script>
</head>

<body>

    <script>
      

        // document.cookie="username=jackbeyant";

        window.addEventListener('load', function () {

            //创建一个有效期为一个月的cookie信息
            var date=new Date();
            date.setMonth(date.getMonth()+1);
            date="date="+escape(date)+";expires="+date.toGMTString();
            document.cookie=date;



            //把写入cookie信息的实现代码进行封装
            /*
            name:cookie名称
            value:cookie值
            expires:有效天数
            path:有效路径
            domain:域
            secure:安全性设置
            name、value、 path、domain为字符串类型
            expires为数值
            secure:布尔值,表示是否加密传输cookie
            */


            //使用navigator对象的cookieEnabled属性,检测当前运行浏览器是否支持cookie
            //返回值；布尔值  true:支持  false:不支持
            
            if(navigator.cookieEnabled){//检测当前运行浏览器是否支持cookie
                setCookie("password","70601585666",0.2);
            }
            

            function setCookie(name, value, expires, path, domain, secure) {
                var today = new Date();
                today.setTime(today.getTime());
                if (expires) {
                    expires = expires * 1000 * 60 * 60 * 24;
                }

                var expires_date = new Date(today.getTime() + (expires)); //新建有效时间对象
                document.cookie = name + "=" + escape(value) +
                    ((expires) ? ";expires=" + expires_date.toGMTString() : "") +
                    ((path) ? ";path=" + path : "") +
                    ((domain) ? ";domain=" + domain : "") +
                    ((secure) ? ";secure=" + secure : "");
            }


        });

        //浏览器对cookie信息都有个数限制
        //把多条信息都保存在一个cookie里,而不是为每条信息都新建一个cookie
        //在cookie中保存更多的信息

        //定义有效期
        var date = new Date();
        date.setMonth(date.getMonth() + 1);
        date = date.toGMTString();
        //定义cookie字符串
        var a="name:jack,gender:male,address:xuzhou";
        var c="user="+escape(a)+";expires="+date;
        document.cookie=c;
    </script>
</body>
</html>

注意:
cookie信息是有域和路径限制的。在默认情况下,仅在当前页面路径有效。
如:
http://ww.mysite.cn/bbs/index.html
这个cookie只会在http://ww.mysite.cn/bbs/ 路径下可见,其他域或者本域其他目录中的文件是无权访问的,这种限制主要是为了保护cookie信息安全,避免恶意读写。

用户可以使用cookie的path和domain属性重设可见路径和作用域。其中path属性包含了与cookie信息相关联的有效路径,domain属性定义了cookie信息的有效作用域。
用法如下:

name=value; expires=date; domain=domain; path=path;
注意:
如果设置path=/,可以设置cookie信息与服务器目录及其子目录相关联,从而实现在整个网站中共享cookie信息;如果只想让bbs目录下的网页访问,设置path=/bbs即可。

比较完整的cookie信息字符串包括下面几个部分:

cookie信息字符串,包含一个名/值对,默认为空。
cookie有效期,包含一个GMT格式的字符串,默认为当前会话期,即如果没有设置,则当关闭浏览时,cookie信息就会因过期被清除。
cookie有效路径,默认为cookie所在页面路径及其子目录。
cookie有效域,默认为设置cookie的页面所在的域。
cookie安全性:默认为不采用安全加密措施进行传递。

Demo:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS之cookie的使用</title>
    <script src="cookieTool.js"></script>
</head>

<body>

    <script>
      

        // document.cookie="username=jackbeyant";

        window.addEventListener('load', function () {

            //创建一个有效期为一个月的cookie信息
            var date=new Date();
            date.setMonth(date.getMonth()+1);
            date="date="+escape(date)+";expires="+date.toGMTString();
            document.cookie=date;



            //把写入cookie信息的实现代码进行封装
            /*
            name:cookie名称
            value:cookie值
            expires:有效天数
            path:有效路径
            domain:域
            secure:安全性设置
            name、value、 path、domain为字符串类型
            expires为数值
            secure:布尔值,表示是否加密传输cookie
            */


            //使用navigator对象的cookieEnabled属性,检测当前运行浏览器是否支持cookie
            //返回值；布尔值  true:支持  false:不支持
            
            if(navigator.cookieEnabled){//检测当前运行浏览器是否支持cookie
                setCookie("password","70601585666",0.2);
            }
            

            function setCookie(name, value, expires, path, domain, secure) {
                var today = new Date();
                today.setTime(today.getTime());
                if (expires) {
                    expires = expires * 1000 * 60 * 60 * 24;
                }

                var expires_date = new Date(today.getTime() + (expires)); //新建有效时间对象
                document.cookie = name + "=" + escape(value) +
                    ((expires) ? ";expires=" + expires_date.toGMTString() : "") +
                    ((path) ? ";path=" + path : "") +
                    ((domain) ? ";domain=" + domain : "") +
                    ((secure) ? ";secure=" + secure : "");
            }
        });
        
        //浏览器对cookie信息都有个数限制
        //把多条信息都保存在一个cookie里,而不是为每条信息都新建一个cookie
        //在cookie中保存更多的信息

        //定义有效期
        var date = new Date();
        date.setMonth(date.getMonth() + 1);
        date = date.toGMTString();
        //定义cookie字符串
        var a="name:jack,gender:male,address:xuzhou";
        var c="user="+escape(a)+";expires="+date;
        document.cookie=c;
    </script>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地数据存储之cookie(1)

web应用的快速发展,在客户端直接存储用户数据变得越来越重要。最简单、易行的方法是cookie。cookie的使用:cookie是保存在客户端系统的一个文本文件,每个cookie文件都与指定web服务器的域中的固定目录相关联当浏览器向服务器请求该目录下的页面时,关联的cookie信息会随着HTTP请求以头部信息的方式发送给服务器在客户端可以使用JS读写cookie信息应用场景:比如:相...
复制链接

扫一扫