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实现

    package practice; import edu.princeton.cs.algs4.StdRandom; public class TestMain { public static voi ...

  2. ps抠图的几种方法

    大家经常会遇到抠图的问题,最多的就是抠人体.头发,抠水,抠树,,,自己经过学习总结了下ps抠图方法,有好几种抠图的方法,我只选择了四种好用的与大家分享 1.色彩范围 比如我们要抠图片上的海水,要抠的图 ...

  3. vue-cli中父子组件间的变量传递

    vue-cli中父子组件间的变量传递 在vue中每一个组件的作用域都是独立的,如果我们想实现父子组件间变量的传递就要另寻他法,而不能直接调用其中的变量. 父级组件向子级组件传递变量 要实现这种效果我们 ...

  4. VHDL学习记录

    VHDL全名Very-High-Speed Integrated Circuit Hardware Description Language ,是一种标准硬件描述语言.下面通过60进制计数器来分析VH ...

  5. css3 如何实现圆边框的渐变

    使用 css 实现下面效果: 把效果分解. 代码一: <style> .helper1 { height: 40px; padding: 15px; background: -webkit ...

  6. JSP小记

    0.配置servlet的模板 1.找Jar文件:\Common\plugins (myeclipse.ini文件中查看) * com.genuitec.eclipse.wizards*.jar 2.找 ...

  7. 201521123008《Java程序设计》第六周实验总结

    1.本周学习总结 2.书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 因为被protected修饰 ...

  8. 201521123055 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 1. ...

  9. java第一次作业0

    lsl321 java第一次作业 #1. 本章学习总结 你对于本章知识的学习总结 本章我们学习了各种java相关文件的使用,以及码云,博客,pat等程序辅助软件,这些对于我们专业的学习有非常大的帮助, ...

  10. 201521123076 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...