JavaScript操作Cookie

简介:

在Web开发中,我们经常使用Cookie保存一些不是非常敏高的数据。比如“下次自动登录”,“广告显示”等功能。定义是:某些网站为了辨别用户身份而存储在用户本地终端(主要是浏览器)上的数据。定义域RFC2109。

 

Cookie总是保存在客户端中,可分为Cookie和硬盘Cookie。内存Cookie保存在内存中,浏览器关闭之后就消失了。硬盘Cookie保存在硬盘里面,有过期时间,除非用户手动清理或者其他网页脚本处理,或者到了Cookie的过期时间。

Cookie的发明目的,因为HTTP协议是无状态的,服务器不知道用户上一次做了什么,这样浏览器和服务器交互时,服务器不知道浏览器的任何状态。服务器借助浏览器设置或读取Cookie中的信息,借此维护浏览器和服务器的会话状态。

通过document.cookie,我们可以写入cookie或读取cookie。代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        //写入cookie
        function setCookie(c_name, value, expiredays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + expiredays);
            document.cookie=c_name+"="+escape(value)+
                ((expiredays==null)?"":";expires"+exdate.toGMTString())
        }
        setCookie("username", "Lee", 365);
        setCookie("password", "小明", 365);

        //读取cookie
        function getCookie(c_name) {
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=");
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1;
                    c_end = document.cookie.indexOf(";", c_start);
                    return unescape(document.cookie.substring(c_start, c_end));
                }
            }
            return "";
        }
        var temp_cookie = "username=Lee; password=%u5C0F%u660E";
        var cookiename="username";
        var start = temp_cookie.indexOf(cookiename+"=");//0
        if(start!=-1){
            start = start + cookiename.length + 1;//1是等号的长度
            end = temp_cookie.indexOf(";", start);//找到分号
            console.log(unescape(temp_cookie.substring(start,end)));
        }
    </script>
</body>
</html>

 

Cookie在隐私,安全和广告的问题

很多网站,特别是新闻门户和电商网站,都会在用户访问该页面时,写入 Cookie。然后你在访问其他网站或电商网站,这些网站也会读取这些cookie,当然确保可以读到cookie信息。然后后台广告服务器根据 cookie的信息,为这个网站显示广告。也就是经常在网络营销里面提到的“人群定向”。

目录
相关文章
|
29天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
2月前
|
JavaScript 数据处理
JS 取整,取余操作
JS 取整,取余操作
|
3月前
|
前端开发 JavaScript Java
【面试题】说说 JavaScript数组常见的操作 (20个)
【面试题】说说 JavaScript数组常见的操作 (20个)
|
3月前
|
存储 JavaScript
JS中数组的操作
JS中数组的操作
|
3月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
|
4天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0
|
4天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4
|
11天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集