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的信息,为这个网站显示广告。也就是经常在网络营销里面提到的“人群定向”。

目录
相关文章
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
5天前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
16 3
|
1月前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
18 3
|
1月前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
19 0
|
2天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
14 7
|
4天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
7 2
|
5天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
10天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
14 0
|
22天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
|
1月前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
20 2