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. 多线程(七)JDK原生线程池

    如同数据库连接一样,线程的创建.切换和销毁同样会耗费大量的系统资源.为了复用创建好的线程,减少频繁创建线程的次数,提高线程利用率可以引用线程池技术.使用线程池的优势有如下几点:        1.保持 ...

  2. 在Hudson Job中启动daemon进程

    场景 在Hudson中新建一个Job用于构建Web工程,在Job的构建脚本的最后会启动Jetty,观察发现Jetty启动之后一小段时间,进程就终止了.   环境 CentOS 6,Hudson 3.0 ...

  3. java使用字节流和字符流实现文件复制

    大家在Java开发中都会遇到文件复制的文件,众所周知,需要通过文件输入输出流实现. 那究竟该怎么做那,话不多说,直接上代码: 一,使用字节流复制文件 public class FileByteCopy ...

  4. 工具类：关于解决数据库中的日期格式，经过response.getWriter().write(json)打到前台日期格式混乱的问题的总结

    经过response.getWriter().write(json)打到前台日期格式混乱的问题的总结 import java.text.SimpleDateFormat;import net.sf.j ...

  5. 用JS制作一个信息管理平台

    首先,介绍一些需要用到的基本知识. [JSON] JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后 ...

  6. setTimeout和setInterval不容易注意到的一些细节

    今天没事翻了翻JS高程,看到了setTimeout部分有这么一句话:调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用.这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取 ...

  7. [转]RMI方式Ehcache集群的源码分析

    RMI方式Ehcache集群的源码分析   Ehcache不仅支持基本的内存缓存,还支持多种方式将本地内存中的缓存同步到其他使用Ehcache的服务器中,形成集群.如下图所示:   Ehcache支持 ...

  8. MyEclipse使用（一）

    一.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JRE name --- ...

  9. Python终端输出打印彩色字体的方法

    一  实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用八进制表示就是0 ...

  10. 201521123119《Java程序设计》第4周学习总结

    1. 本周学习总结 2.书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在网上商城 ...