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. 【NOIP2014】子矩阵

    这题如果按暴力做只有一半分,最大时间复杂度为O(C(16,8)*C(16,8)); 很容易算出超时: 我们可以发现如果直接dp会很难想,但是知道选哪几行去dp就很好写状态转移方程: dp[i][j]= ...

  2. caffe cifar10试跑问题总结

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...

  3. httpd常用配置

    author:JevonWei 版权声明:原创作品 检查配置文件时,如下提示,则因为没有server的服务名称导致,故设置网站的服务server名称,若没有设置web服务名,主默认解析系统主机名(添加 ...

  4. mqtt实现自动监听服务器消息

    本示例借助meteor的一个环境跑,和我们平时用的node自己搭的环境或java,php的环境本质一样,在此不多讨论. 首先需求是:多系统对接进行消息实时传递. 安装好mqtt:  npm insta ...

  5. oracle 数据的导入导出

    一.数据导出 1.为输出路径建立一个数据库的directory对象. create or replace directory dumpdir as 'd:\'; 可以通过:select * from ...

  6. （八）、vpn-pptp部署

    中小型规模网站集群架构:VPN-PPTP : 矮哥linux运维群:93324526 前言: 你想管理机器吗? 你想更安全吗? 请安装VPN吧 部署 1.查看系统是否支持PPP [root@oldbo ...

  7. 浏览器console的用法

    Leo_wlCnBlogs 自由.创新.研究.探索 Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件 ...

  8. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  9. 结构体(struct)大小

    结构体(struct)大小 本文参考链接:C语言结构体(struct)常见使用方法,链接中的实例代码经实践有几处不准确,本文在引用时已做更改 注意:在结构体定义时不能申请空间(除非是结构体变量),不可 ...

  10. CentOS7 安装Nginx+MySQL

    首先我们需要安装nginx的yum源 [root@AD ~]# rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-releas ...