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>

注：转载请注明出处

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

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

    前言:ant-design-pro的技术组成主要是react+redux+dva+antd+fetch+roadhog,dva在源码包index.js里面导出了fetch,但是如果不想使用fetch库 ...

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

    前言:最近学习vue和react的高阶项目,都需要和Nodejs+Express+MongoDB结合实现全栈开发.这里结合实例Demo和所学项目集中总结一下这部分服务端的基础知识. 一.Express ...

  3. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  4. 【重点突破】—— UniApp微信小程序开发教程学习Three

    一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 ...

  5. 【重点突破】—— UniApp 微信小程序开发官网学习Two

    一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, ...

  6. 【重点突破】——Canvas技术绘制随机改变的验证码

    一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...

  7. 【重点突破】——two.js模拟绘制太阳月亮地球转动

    一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...

  8. 【重点突破】——使用Express创建一个web服务器

    一.引言 在自学node.js的过程中有一个非常重要的框架,那就是Express.它是一个基于NodeJs http模块而编写的高层模块,弥补http模块的繁琐和不方便,能够快速开发http服务器.这 ...

  9. 【重点突破】—— 当better-scroll 遇见Vue

    前言:在学习黄轶老师的<Vue.js高仿饿了么外卖App>课程中接触到了better-scroll第三方JavaScript组件库,这是黄轶老师自己基于iscroll重写的库.这里结合黄轶 ...

随机推荐

  1. 堆排序—Java

    堆排序: 一棵完全二叉树,如果父节点的值大于等于左右节点的值,则称此完全二叉树为小根堆(小顶堆):如果父节点的值小于等于左右节点的值,则次完全二叉树为大根堆(大顶堆). 堆排序是建立在大顶堆或小顶堆的 ...

  2. 常用Linux操作指令

    -------------------------------Linux目录------------------------------- /:根目录,一般根目录下只存放目录,在Linux下有且只有一 ...

  3. Maven maven-compiler-plugin版本

    项目执行Maven clean后出现WARNING提示.报如信息如下,根据报错信息 'build.plugins.plugin.version' for org.apache.maven.plugin ...

  4. spring mvc:ueditor跨域多图片上传失败解决方案

    公司在开发一个后台系统时需要使用百度的UEditor富文本编辑器,应用的场景如下: UEditor的所有图片.js等静态资源在一个专有的静态服务器上: 图片上传在另外一台服务器上: 因为公司内部会使用 ...

  5. C#：委托（delegate）和事件(event) (转)

    委托(delegate): 它是C#语言里面的函数指针,代表可以指向某一个函数,在运行的时候调用这个函数的实现.下面来看看它的实现步骤: 声明一个delegate对象. 实现和delegate具有相同 ...

  6. bugly cocos 接入和 符号表使用

    bugly cocos 接入和 符号表使用 在bugly网站下载 BuglyCocosPlugin 的sdk ios 1. 在 项目的 classes 里面新建 文件夹  BuglyCocosPlug ...

  7. spring整合mybatis错误：class path resource [config/spring/springmvc.xml] cannot be opened because it does not exist

    spring 整合Mybatis 运行环境:jdk1.7.0_17+tomcat 7 + spring:3.2.0 +mybatis:3.2.7+ eclipse 错误:class path reso ...

  8. Python闭包及其作用域

    Python闭包及其作用域 关于Python作用域的知识在python作用域有相应的笔记,这个笔记是关于Python闭包及其作用域的详细的笔记 如果在一个内部函数里,对一个外部作用域(但不是全局作用域 ...

  9. django源码解析一(请求处理流程)

    1.我们都知道WSGI是一个规范,规范了server和application之间通信的一些约束,server端在监听到请求之后,会把请求转给application去处理,他们之间关联起来的桥梁是一个e ...

  10. 学习Python Day1

    学习PythonDay1,主要是学习了循环,while循环,for循环:while循环加if.else以及elif,for循环嵌套for循环:break,终止循环,continue跳出循环:for i ...