【重点突破】——Cookie的使用

cookie:小甜饼
cookie:保存客户端浏览器中一个纯文本文件

版本高的浏览器可查看   F12->Resource  左下方cookie    查看

cookie作用:
保存:[安全性要求不高]文字或数字数据

登录密码?安全性要求高,不能保存

通用方案:
1:用户昵称/用户名/用户编号
2:浏览过商品
3:大型网站-->用户购物车中数据也保存cookie

特点:

长年保存:10年7天

短期保存:打开浏览器保存,关闭清除数据

语法:!!!!重点.

1:cookie_add.html 保存cookie
document.cookie = ‘名=值‘;
document.cookie = ‘uid=10‘;

2:cookie_read.html 读取cookie
var str = document.cookie;

var str = "name=tom;age=10;sex=F";
var arrStr = str.split(";");
["name=tom","age=10","sex=F"]
name = arrStr[0].split("=")[0];
tom = arrStr[0].split("=")[1];

拆分出想要的数据:

“;空格”得数组    小坑:千万不能忘了;后面的空格

“=”得值

var str = document.cookie;
var arr = str.split("; ");
var subarr = arr[i].split("=");

全部转换为对象,操作方便

var arr = document.cookie.split(; );
var obj = {};
for(var i = 0;i<arr.length;i++){
   var pair = arr[i].split("=");
   var key = pair[0];
   var ral = pair[1];
   obj[key] = val;
}

举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h3>cookie添加</h3>
    <script>
        document.cookie = ‘uid=10‘;
        document.cookie = ‘uname=zhangsan‘;
    </script>
    <h3>##注意:浏览器不要关闭</h3>
    <a href="cookie_read.html">查看cookie</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h3>cookie读取</h3>
    <script>
       function getCookieVal(key){
           var rs = null;
           var line = document.cookie;
           var arr = line.split("; ");
           for(var i=0;i<arr.length;i++){
              var kv = arr[i];
               //第二次拆分
              var option = kv.split("=");
              var k = option[0].trim();//去除字符串前后的空格
              var v = option[1];
               if(key===k){
                   return v;
               }
           }
           return rs;
       }
        var rs = getCookieVal("uid");
        console.log(rs);
        var rs = getCookieVal("uname");
        console.log(rs);
    </script>
</body>
</html>

时间: 2024-10-03 05:24:52

【重点突破】——Cookie的使用的相关文章

【重点突破】—— fetch()方法介绍

前言:ant-design-pro的技术组成主要是react+redux+dva+antd+fetch+roadhog,dva在源码包index.js里面导出了fetch,但是如果不想使用fetch库,想换成其他库也是可以的(axios后期扩展性更好些),roadhog主要是基于webpack实现的封装.关于fetch发送请求的代码都封装在了utils/request.js文件中.PS:这里重点梳理对fetch()的使用学习,原文地址:大灰狼的小棉羊哥哥博客 与XMLHttpRequest(XH

【重点突破】—— Nodejs+Express+MongoDB的使用基础

前言:最近学习vue和react的高阶项目,都需要和Nodejs+Express+MongoDB结合实现全栈开发.这里结合实例Demo和所学项目集中总结一下这部分服务端的基础知识. 一.Express+mongodb开发web后台接口Demo Express开发web接口 Express:基于nodejs,快速.开放.极简的web开发框架  [官网] 安装express npm install express --save 新建server目录:server.js编写后端代码 const exp

【重点突破】—— Easy Mock的使用及Mock.js规范

前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范.  一.Easy Mock的使用 官网 官网地址:https://www.easy-mock.com/login 未注册用户直接登录便可注册 使用 创建个人项目 自定义项目 创建完成 创建接口 接口设置 数据规则定义 编辑接口 更改数据 接口设置更新 预览数据  二.Mock.js规范 官网 官网地址:http://mock

【重点突破】—— react使用http-proxy-middleware反向代理跨域

create-react-app脚手架低于2.0版本时候,可以使用对象类型 "proxy": { "/api": { "target": "http://localhost:5000", "changeOrigin": true } } 最新的create-react-app脚手架2.0版本以上只能配置string类型 "proxy": "http://localhost:50

Cookie文件说明及IE的Cookie文件格式

1.Cookie文件的实质 Cookie实际上是Web服务端与客户端(典型的是浏览器)交互时彼此传递的一部分内容,内容可以是任意的,但要在允许的长度范围之内.客户端会将它保存在本地机器上(如IE便会保存在本地的一个txt文件中),由客户端程序对其进行管理,过期的Cookie会自动删除.每当客户端访问某个域下某个目录中的网页时,便会将保存在本地并且属于那个域下对应目录的有效Cookie信息附在网页请求的头部信息当中一并发送给服务端. 2.Cookie文件的保存位置 不同的客户端,其Cookie的保

IE/Firefox/Chrome等浏览器保存Cookie的位置

IE/Firefox/Chrome等浏览器保存Cookie的位置 原文  http://smilejay.com/2013/04/browser-cookie-location/ 前面写了篇长文( 使用Jmeter登录WordPress的问题 )中也重点是Cookie的问题,这里再简单说下什么是Cookie并且列举一下主流浏览器保存Cookie的位置吧. 什么是Cookie? A cookie, also known as an HTTP cookie, web cookie, or brows

Cookie学习

1-Cookie学习 目前大家对于浏览器和服务器的交互模式,以及请求的处理都有了理解,并且也能够进行请求的处理.本节课围绕整个流程再次进行技术优化,重点学习Cookie 技术,此技术的应用面是非常广的. Cookie学习 问题: HTTP 协议是没有记忆功能的,一次请求结束后,相关数据会被销毁.如果第二次的请求需要使用相同的请求数据怎么办呢? 难道是让用户再次请求书写吗? 解决: 使用Cookie 技术解释: Cookie 技术其实是浏览器端的数据存储技术,解决了不同请求需要使用相同的请求数据的

Servlet请求和响应和Cookie

1.Servlet请求操作 通过前面的学习我们能够创建并运行一个简单的Servlet 程序,完成浏览器和服务器的简单交互,但是我们编写的Servlet 代码是没有对浏览器的请求进行处理的.现在我们开始学习 如何使用Servlet 进行浏览器请求的处理. 1)Request 对象 问题: 浏览器发起请求到服务器,会遵循HTTP 协议将请求数据发送给服务器. 那么服务器接受到请求的数据改怎么存储呢?不但要存,而且要保证完成性. 解决: 使用对象进行存储,服务器每接受一个请求,就创建一个对象专门的存储

初窥编译原理

编译原理是什么? 编译原理是计算机专业的一门重要专业课,学生可以学习到编译程序构造的一般原理和基本方法,这门课在理论.技术.方 法上都对学生提供了系统而有效的训练,有利于提高软件人员的素质和能力.具体来说,编译原理是讲述机器是如何将高级程序语言转换成机器唯一能懂的机器语言 的,以及编译软件是如何工作的. 学习编译原理有什么好处? 学习编译原理可以了解机器怎样将高级程序语言转换成机器语言,也可以了解编译软件的工作原理.这门课掌握得好甚至可以创造出自己的语言,对自己所写的程序.程序语言都会有更深的本