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

目录
相关文章
|
4月前
|
存储 JavaScript 前端开发
JavaScript Cookie
JavaScript Cookie
29 0
|
6月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
101 9
|
7月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
316 0
|
7月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
62 1
|
7月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
54 0
|
7月前
|
存储 JavaScript 前端开发
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
58 0
|
7月前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
64 1
|
7月前
|
JavaScript 前端开发
js/javascript 操作对象【全】(含常用的操作对象的lodash)
js/javascript 操作对象【全】(含常用的操作对象的lodash)
48 0
|
7月前
|
存储 JavaScript 前端开发
js/javascript 操作数组【全】(含常用的操作数组的lodash)
js/javascript 操作数组【全】(含常用的操作数组的lodash)
45 0
|
7月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
195 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    28
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55