JQuery

jQuery

<script src='jquery.js'></script>
<script>
	var mydiv = $('#mydiv');
    mydiv.css(width="");
</script>

关系：JQuery的本质是JS，对JS功能的扩展

JQuery与JS的相互转换

1. JS对象 => JQ对象

   $(‘JS对象’)

2. JQ对象 => JS对象

   JQ对象[0]

<script>
	// 需求：给div设置一个title属性
    // mydiv.setAttribute('title','hello')
    
    // JS对象 => JQ对象
    var mydiv = document.getElementByid('mydiv');
    // 给JS对象包裹一层$()
    $(mydiv);
    
    // JQ对象 => JS对象
    $('#mydiv')[0]
</script>

解决冲突

1. JQuery == $

2. 让出$符号

   JQuery.noConfilter()

*页面加载完成后

1. $(document).ready(function(){……})

   省略：$().ready(function(){……})

   省略：$(function(){……})

2. 与window.onload的区别：

   onload：表示页面内容全部加载完成

   ready：表示页面加载结构全部完成。不包含媒体（如：图片、视频、音频……）

   ready先执行，onload后执行

   ready可以写多次

获得子元素

1.children()方法：获取该元素下的直接子集元素

2.find()方法：获取该元素下的所有子集元素

选择器

注：伪类不适用

<script>
	// 标签选择器
    $('ul').css('color','red')
    // 类选择器
    $('li.five').css()
    // ID选择器
    $('#four').css()
    // 后代选择器
    $('ul li').css()
        // 子级选择器
        $('ul > li').css('color','orange')
        //相邻兄弟选择器
        $("#woniu + a").css("color", "orange");
        // 兄弟选择器
        $("#woniu ~ a").css("color", "orange");
        // 上一个兄弟节点
        $('.four').prev('li').css("color", "orange");
        // 下一个兄弟节点
        $('.four').next('li').css("color", "orange");
        // 所有上兄弟节点
        $('.four').prevAll('li').css("color", "orange");
        // 所有下兄弟节点
        $(".four").nextAll("li").css("color", "orange");
        //所有的兄弟节点
        $(".four").siblings().css("color", "orange");
        // 等于 eq(下标)
        $("a:eq(0)").css("color", "orange");
        // 获取第一个元素
        $("li:first").css("color", "orange");
        // 获取最后一个元素
        $('li:last').css("color", "orange");
        // 除了
        $('li:not(li:last)').css("color", "orange");
        // 偶数
        $('li:even').css("color", "orange");  // 从0开始
        // 奇数
        $('li:odd').css("color", "orange");
        // 大于
        $('li:gt(2)').css("color", "orange");
        // 小于
        $("li:lt(2)").css("color", "orange");
</script>

可见性过滤选择器

/*
	display:none;
	visibility:hidden;
	opacity:0;
	hidden
	type:hidden
*/
// 找到所有看不见的标签：opacity、visibility 除外
console.log((li:hidden))
// :visible可以找到所有看得见的标签：包括opacity、visibliity：hidden隐藏的元素
console.log($("body :visible"));

内容过滤选择器

<script>
    // 包含某个文本的div 
	$('li:contents('我的').css()')
    // 不包含任何子节点的div
    console.log($(div.empty));
    // has()包含span的div标签
    $('div:has(span)').css()
    // :parent 含有子节点的标签
    $('div:parent').css({
        color : red;
    })
</script>

边框染色，默认跟着字的颜色变化

属性选择器

<script>
    //寻找带有href属性的a标签
    $("a[href]").css('color','red');
    //寻找href属性值等于mother的a标签
    $("a[href=mother]").css('background','yellow');
    //寻找href属性值不等于mother的a标签
    $("a[href!=mother]").css('background','pink');
    //寻找href属性值以http开头的a标签
    $("a[href^=http]").css('background','yellowgreen');
    //寻找href属性值以com结尾的a标签
    $("a[href$=com]").css('font-weight','900');
    //寻找href属性值包含字母o的a标签
    $("a[href*=o]").css('font-weight','400');   
</script>

表单选择器

<script>
    //:input寻找所有的表单标签
    console.log($(":input"))

    //根据input的type寻找表单元素
    console.log($(":text"));
    console.log($(":password"));
    console.log($(":radio"));
    console.log($(":checkbox"));

    //寻找按钮
    console.log($(":submit"));
    console.log($(":reset"));
    console.log($("button[type=button]"));

    //文件上传
    console.log($(":file"));

    //查找被禁用的input元素
    console.log($("input:disabled"));

    //查找未被禁用的input元素
    console.log($("input:enabled"));

    //寻找被选中的那些元素(单选框、复选框、下拉菜单)
    console.log($(":checked"));
    //下拉菜单中被选中的元素
    console.log($(":selected"));
</script>

Each

<script>
	    //each():既可以遍历jquery的元素集合，也可以遍历普通原生数组
    $("h1").each(function (index, element) {
      console.log(index, element);
    });

    var arr = [5, 6, 7, 8];
    $.each(arr, function (index, element) {
      console.log(index, element);
    });
</script>

attr

<script>
    //保存一个属性
    $("a").attr("title","爱你");

    //获取一个属性
    console.log($("a").attr("title"))

    //保存多个属性
    $("a").attr({
        id:"woniu",
        class:"xiao woniu"
    })

    //删除属性
    $("a").removeAttr("class")
</script>

prop

    <script>
      //如果设置了checked，attr获取的结果也是checked
      //如果没有设置checked，attr获取的结果是undefined
      console.log($("input").attr("checked"));
      console.log($("input").attr("disabled"));

      //prop针对于单属性比较合适，返回true或false结果
      console.log($("input").prop("checked"));
      console.log($("input").prop("disabled"));
</script>

CSS

    <script>
      console.log($("div").css("width"));
      // 使用驼峰命名法，可以不加引号
      $("div").css({
        backgroundColor: "red",
        borderRadius: "20px",
      });
      // 使用数组的方式查询
      console.log($("div").css(["width", "height", "background-color"]));
    </script>

Class

    <script>
      // toggle 切换
      $("div").addClass("a b");
      $("div").removeClass("a");
      $("div").toggleClass("c");
      $("div").toggleClass("c");
    </script>

text_val

    <script>
      //获取或设置文本框的值 value
      $("input").val("大家好");
      console.log($("input").val());

      //取出div里面的所有内容，包括html
      //设置div里面的内容，并解析html标签的
      console.log($("div").html());

      //取出div里面的所有内容，不包括html
      //设置div里面的内容，不解析html标签
      console.log($("div").text());
      $("div").html("<b>" + $("div").html() + "</b>");
    </script>

Size

<script>
    var div = $("div");
    console.log(div.width());//原始宽度
    console.log(div.innerWidth());//原始宽度 + padding
    console.log(div.outerWidth());//原始宽度 + padding + border
    console.log(div.outerWidth(true));//原始宽度 + padding + border + margin
    console.log($(window).height());//窗口的可视高度
    console.log($(document).height());//文档高度


    div.mouseover(function(){
        $(this).css('background','yellow');
    })
</script>

Offset

<script>
    //到body的距离：left，top
    console.log($("p").offset().left);
    //到最近一个设置了定位的祖先元素距离：left，top
    console.log($("p").position().left);
</script>

scrollTop([value])

<script>
    //scrollTop([value])
    //可以用来设置滚动条的top或left，也可以获取滚动条的top和left
    $("div").scroll(function(){
        console.log($(this).scrollTop());
    })
    //给按钮绑定单击事件
    $("button").click(function(){
        $("div").scrollTop(0)
    })
</script>

append 与 prepend

给后面追加
// 给ul追加一个li
$('ul').append('<li>Vue3.0</li>');
// 创建li，追加到ul里面
$('<li>Vue3.0</li>').appendTo('ul');

给前面追加
$('ul').prepend('<li>Vue3.0</li>')
$('<li>Vue3.0</li>').prependTo('ul')

befor 与 after

// 给Apple的前面添加一个新节点
$('.Apple').befor('<li>Vue3.0</li>')
// 创建一个li，添加到Apple的前面
$('<li>Vue3.0</li>').insertBefore('.Apple')

// 给Apple的后面添加
$('.Apple').after('<li>Vue3.0</li>')
// 创建一个li，添加到Apple的后面
$('<li>Vue3.0</li>').insertafter('.Apple')

扩展

      // 每个ul外包裹一个div
    // $("ul").wrap("<div>");

      //所有的ul共同包裹一个div 
    // $("ul").wrapAll("<div>");

replace

replace：取代

<script>
    //新节点.replaceAll(被替换的节点)
    // $("<a href=''>Hate</a>").replaceAll('a')

    //被替换的节点.replaceWith(新节点)
    // $('a').replaceWith('<span>span</span>')

    //remove()：删除自己以及子孙节点
    // $("#like").remove();

    $("#like").click(function(){
        alert('喜欢')
    })

    //克隆：clone()只克隆元素，不克隆事件。clone(true)连带事件一起克隆
    var cloneLike = $("#like").clone(true);
    $("body").append(cloneLike);

    // var like = document.getElementById("like")
    // var cloneLike = like.cloneNode()
    // cloneLike.innerText = '我是克隆的'
    // document.body.appendChild(cloneLike)
</script>

parent 与 parents

// 找父级
$('.info').parent()
// 找祖先
$('.info').parents()

find 与 filter

• find() 后代选择器
• filter() 普通过滤器
• not() 取反

$('祖先').find('后代（必须写）')
$('祖先').filter()
$('祖先').not()

on()

// 一个事件，一个处理函数
$('button:nth-child(1)').on('click',function(){})
// 多个事件，一个处理函数
$('button:nth-child(2)').on('mousemove  dblclick',function(){})
// 多个事件，多个处理函数
$('button:nth-child(1)').on({
click:function(){},
click:function(){},
click:function(){},
………………
})

事件代理

$('div').on('click','button:nth-child(2)',function(){})

off取消事件绑定

$('button:nth-child(2)')off('mousemove')

one

一次性事件，只执行一次

hover

enter：输入

leave：输出

<script>
    $("div").css({
        width:200,height:200,'background-color':'red'
    })
    function enter(){
        $(this).css('background-color','yellow');
    }
    function leave(){
        $(this).css('background-color','red');
    }
    //hover合成事件：合成了mouseenter和mouseleave两个事件
    //鼠标进入调用第一个函数
    //鼠标离开调用第二个函数
    $("div").hover(enter,leave);
</script>

show hide toggel

<script>
    // 隐藏
	$('').hide(时间,[回调函数]);	// 本质是display:none
    // 显示
    $('').show()
    // 切换
    $('').toggle()
</script>

fade

fade:褪色

<script>
    $("#hide").click(function(){
        //本质就是display:none;
        $("div").fadeOut("slow");
    })
    $("#show").click(function(){
        $("div").fadeIn("fast");//本质是display,根据该元素隐藏之前的属性来改变的。
    })
    $("#toggle").click(function(){
        $("div").fadeToggle(5000);//显示与隐藏的切换
    })
    $("#fadeTo").click(function(){
        $("div").fadeTo(2000,0.1); //透明度的设置 0-1之间
    })
</script>

slide

slide:幻灯片

  <script>
    // 隐藏
    $("#hide").click(function () {
      //本质就是display:none;
      $("body div").hide();
    });
    // 显示
    $("#show").click(function () {
      //本质是display,根据该元素隐藏之前的属性来改变的。
      $("body div").show();
    });
    // 切换
    $("#toggle").click(function () {
      //显示与隐藏的切换
      $("body div").toggle();
    });
  </script>

animate

// 当前动画停止，后续动画继续执行
$().stop()
// 当前动画停止，后续动画也全部停止
$().stop(true)
// 当前动画立刻结束，后续动画停止
$().stop(true，true)
// 等待时间
.delay()

  <script>
    $("div").css({
      width: "100px",
      height: "100px",
      background: "red",
    });
    // 动画
    $("button:first").click(function () {
      $("div")
        .animate(
          {
            width: "300px",
            height: "300px",
          },
          1000
        )
        .animate(
          {
            marginTop: "100px",
            marginLeft: "100px",
          },
          1000
        );
    });
    $("button:nth-child(2)").click(function () {
      console.log("111");
      $("div").stop();
    });
    $("button:nth-child(3)").click(function () {
      $("div").stop(true);
    });
    $("button:nth-child(4)").click(function () {
      $("div").stop(true, true);
    });
  </script>

queue

<script>
    $("button:first").click(function () {
      $("div")
        .animate(
          {
            width: "300px",
            height: "300px",
          },
          1000
        )
        // 等待
        .delay(1000)
        // queue  队列
        .queue(function (next) {
          $(this).css("background", "yellow");
          next();
        })
        .animate(
          {
            marginTop: "100px",
            marginLeft: "100px",
          },
          1000
        );
    });
</script>

立刻完成动画

jQuery对象.finish(); // 所有运动立即到终点

插件制作

// 插件一：JQ节点去调用
<script>
	$.fn.black = function(){
        // this就是调用这个插件函数的JQuery节点
        this.css('样式名','值')
    }
    $('').black()
</script>
<script>
      //插件二：用途1是可以用来做对象的合并，用途2制作一些工具类函数
      var obj1 = { name: "小三儿" };
      var obj2 = { age: 60, hobby: ["运动"] };
      console.log($.extend(obj1, obj2));

      //字符串转大写工具函数
      $.extend({
        myUpperCase: function (str) {
          return str.toUpperCase();
        },
      });
      console.log($.myUpperCase("hello World"));
</script>

    <script>
      // 插件一：JQ节点去调用
      $.fn.black = function () {
        this.css("background", "black");
      };
      $("button")
        .parent()
        .on("click", "button", function () {
          $("span").black();
        });
    </script>

HTML与XML

HTML（超文本标记语言）

XML（可扩展标记语言）：类似于HTML的，用途是作为数据传输的

我方项目：

图片的种类

JPG、PNG、GIF、webp(制图)、SVG(矢量图)

当元素的值发生改变时，会发生 onchange 事件。

offsetX、offsetY: 鼠标相对于事件源元素（srcElement）的X,Y坐标

clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。

pageX、pagey: 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没 有这2个属性

screenX、screenY: 鼠标相对于用户显示器屏幕左上角的X,Y坐标。

动画延迟

语法：
jQuery对象.delay(时间);
案例：

    $("DIV")
    .animate()
    .delay(2000) // 延迟两秒再进行下面的动画
    .animate();

队列queue

含义：
可以在整个动画队列中，插入其他的非动画操作，比如CSS的修改
案例：

    JQ对象
    .animate()
    .queue(function(next) {
    $(this).css('background', 'yellow');
    next(); // 执行完这次队列后再次执行队列中的下一个动画函数
    })
    .animate()

定时器

2种：
1.setTimeout(等待一段时间后，再执行某个函数,只执行一次)
var timer = setTimeout(fn,毫秒)
清除：
clearTimeout(timer)

2.setInterval(等待一段时间后,再执行某个函数,重复执行)
var timer = setInterval(fn,毫秒)
clearInterval(timer)

HTML5

1. 新增了一些语义化布局标签：header,footer,main,aside……
2. 新增了一些表单标签，表单属性
3. 新增了媒体标签
4. 绘图知识
5. 地理定位
6. 设备信息

HTML与XML

HTML（超文本标记语言）
XML（可扩展标记语言）：类似HTML的，用途是作为数据传递的
我方项目：Java
对方项目：C++
XML用于跨平台，跨语言的数据传输媒介

图片的种类

JPG、PNG、GIF、webp(智图)、SVG(矢量图)

SVG的特点

1. SVG 图像可通过文本编辑器来创建和修改
2. SVG 图像可被搜索、索引、脚本化或压缩
3. SVG 是可伸缩的
4. SVG 图像可在任何的分辨率下被高质量地打印
5. SVG 可在图像质量不下降的情况下被放大

Canvas画布

语法：

    //画布的宽高默认是300*150，不能在css中指定宽高
    <canvas width="200" height="200"></canvas>

定义用红色填充的矩形：

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(20,20,150,100);

绘制一个矩形。请用红色的笔触颜色：

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeStyle="#FF0000";
    ctx.strokeRect(20,20,150,100);

画线段

    var canvas=document.querySelector("canvas");
    var ctx=canvas.getContext("2d");
    ctx.moveTo(20,20);//开始位置
    ctx.lineTo(30,50);//目标位置
    ctx.lineTo(44,50);
    ctx.stroke();//画线

绘制带边框且填充颜色的矩形

    ctx.fillStyle="yellow"
    ctx.strokeStyle="black";
    ctx.rect(50,50,20,20)
    ctx.fill();
    ctx.stroke();

beginPath()：重置画笔

画两条不同样式的线段

    ctx.beginPath();
    ctx.lineWidth=5;
    ctx.strokeStyle="green";
    ctx.moveTo(0,75);
    ctx.lineTo(250,75);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle="purple";
    ctx.moveTo(50,0);
    ctx.lineTo(150,130);
    ctx.stroke();

closePath()：给线段封口

    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.lineTo(50,100);
    ctx.closePath();
    ctx.stroke();

lineWidth

    ctx.lineWidth=5; //边框宽度

lineCap

    //butt(默认),round(圆角),square(高度多出宽度的一半)
    ctx.lineWidth=20;
    ctx.lineCap='square';

arc(画圆、画弧线)

    //弧度=角度*Math.PI/180【PI为180°】
    //弧的圆形的三点钟位置是 0 度
    arc(x 坐标, y 坐标,圆的半径,起始弧度,结束弧度,逆时针还是顺时针)

clearRect 清除画布

    clearRect(x,y,width,height)

save与restore

ctx.save();//保存进度：设置一个保存点
ctx.restore(); //还原到上次保存的状态，在restore之前做的任何操作不会对后面产生影响

localStorage

<script>
    // 存
    localStorage.setltem('name','frank')
    localStorage.setltem('age',20)
    // 修改（一样的名字，直接修改）
    localStorage.setItem("name", "修改");
    // 取
    localStorage.getItem('name','frank')
    // 删
    localStorage.removeItem('name','frank')
    // 清空
    localStorage.clear()
</script>

API

cookies【曲奇】

作用：
在浏览器保存一些文本信息
应用：
两周免登录
记录用户的浏览记录
特点：
不能同时存储多个，如有多个需存储多次
存储时key值相同，后面的会覆盖前面的，只保留一个
语法：

    //存储到会话中[会话即是当前窗口,窗口不关闭,则一直存在,窗口关闭,cookie销毁]
    document.cookie = "myname=jackie"    //存储jackie 两个星期
    var myDate = new Date();
    myDate.setDate(myDate.getDate()+14);
    document.cookie="myname=jackie;expires="+myDate;
    
    //获取cookie,自己用字符串截取的方式取出jackie
    document.cookie.split('=')[1];
    
    //删除cookie: cookie本身不带删除功能
    //解决方法：再存储一次cookie，同样的值，这次到期时间设置为昨天

分类
Cookie保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。

内存 Cookie 由浏览器维护，保存在内存中，浏览器关闭即消失，存在时间短暂。硬盘Cookie保存在硬盘里，有过期时间，除非用户手动清理或到了过期时间，硬盘Cookie不会清除，存在时间较长。所以，按存在时间，可分为非持久Cookie和持久Cookie。

用途
因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，所以Cookie就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookie中包含的信息，借此维护用户跟服务器会话中的状态。

在刚才的购物场景中，当用户选购了第一项商品，服务器在向用户发送网页的同时，还发送了一段Cookie，记录着那项商品的信息。当用户访问另一个页面，浏览器会把Cookie发送给服务器，于是服务器知道他之前选购了什么。用户继续选购饮料，服务器就在原来那段Cookie里追加新的商品信息。结帐时，服务器读取发送来的Cookie即可。
录了。
Cookie另一个典型的应用是当登录一个网站时，网站往往会请求用户输入用户名和密码，并且用户可以勾选“下次自动登录”。如果勾选了，那么下次访问同一网站时，用户会发现没输入用户名和密码就已经登录了。这正是因为前一次登录时，服务器发送了包含登录凭据（用户名加密码的某种加密形式）的Cookie到用户的硬盘上。第二次登录时，如果该Cookie尚未到期，浏览器会发送该Cookie，服务器验证凭据，于是不必输入用户名和密码就让用户登

Cookie的缺陷
Cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
由于HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非使用超文本传输安全协定。
Cookie的大小限制在4 KB左右，对于复杂的存储需求来说是不够用的。[3]
使用Cookie
用户可以改变浏览器的设置，以使用Cookie。同时一些浏览器自带或安装开发者工具包允许用户查看、修改或删除特定网站的Cookie信息。

识别功能
如果在一台计算机中安装多个浏览器，每个浏览器都会以独立的空间存放Cookie。因为Cookie不但可确认用户信息，还包含计算机和浏览器的信息，所以一个用户使用不同的浏览器登录或者用不同的计算机登录，都会得到不同的Cookie信息，另一方面，对于在同一台计算机上使用同一浏览器的多用户群，Cookie不会区分他们的身份，除非他们使用不同的用户名登录。

反对Cookie者
一些人反对Cookie在网络中的应用，他们的理由如下：

识别不精确
如果在同一台机器上使用多个浏览器，每个浏览器在不同的存储位置保存Cookie，因此，Cookie并不能定位到一个具体的人，而是用户、计算机和浏览器的组合。

不准确的状态
如果用户在获取了一个Cookie之后，点击了浏览器的“回退”按键，则浏览器的状态和获取Cookie的状态就出现了不一致。例如，如果网站基于Cookie技术实现了购物车的应用，当用户添加了物品后点击了“回退”按键，购物车的物品状态可能并没有发生变化。

隐私、安全和广告
Cookie在某种程度上说已经严重危及用户的隐私和安全。其中的一种方法是：一些公司的高层人员为了某种目的（譬如市场调研）而访问了从未去过的网站（通过搜索引擎查到的），而这些网站包含了一种叫做网页臭虫的图片，该图片透明，且只有一个像素大小（以便隐藏），它们的作用是将所有访问过此页面的计算机写入Cookie。而后，电子商务网站将读取这些Cookie信息，并寻找写入这些Cookie的网站，随即发送包含了针对这个网站的相关产品广告的垃圾邮件给这些高级人员。

偷窃Cookie和脚本攻击
虽然Cookie没有中电脑病毒那么危险，但它仍包含了一些敏感消息：用户名、电脑名、使用的浏览器和曾经访问的网站。用户不希望这些内容泄漏出去，尤其是当其中还包含有私人信息的时候。

这并非危言耸听，跨站点脚本（Cross site scripting）可以达到此目的。在受到跨站点脚本攻击时，Cookie盗贼和Cookie投毒将窃取内容。一旦Cookie落入攻击者手中，它将会重现其价值。

Cookie盗贼：搜集用户Cookie并发给攻击者的黑客，攻击者将利用Cookie消息通过合法手段进入用户帐户。
Cookie投毒：一般认为，Cookie在储存和传回服务器期间没有被修改过，而攻击者会在Cookie送回服务器之前对其进行修改，达到自己的目的。例如，在一个购物网站的Cookie中包含了顾客应付的款项，攻击者将该值改小，达到少付款的目的。

Cookie的替代品
鉴于Cookie的局限和反对者的声音，有如下一些替代方法：

Brownie方案（页面存档备份，存于互联网档案馆），是一项开放源代码工程，由SourceForge发起。Brownie曾被用以共享在不同域中的接入，而Cookie则被构想成单一域中的接入。这项方案已经停止开发。
P3P，用以让用户获得更多控制个人隐私权利的协议。在浏览网站时，它类似于Cookie。这项方案也已经停止开发。
在与服务器传输数据时，通过在地址后面添加唯一查询串，让服务器识别是否合法用户，也可以避免使用Cookie

localStorage

存储大小：5mb
存储形式：字符串
期限：永久

    存:    localStorage.XXX="123445"
    localStorage.a = 3;//设置a为"3"
    localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
    localStorage.setItem("b","isaac");//设置b为"isaac"
    取:    localStorage.XXX        如果没有，则返回undefined
    var a1 = localStorage["a"];//获取a的值
    var a2 = localStorage.a;//获取a的值
    var b = localStorage.getItem("b");//获取b的值
    删:    localStorage.removeItem("c");//删除c的
    清:    localStorage.clear();//清空所用localStorage(不常用)
    
    对象与数组存储:
    
    //转换为JSON字符串再存
    localStorage.setItem(key,JSON.stringify(对象));
    
    //取出来:转换为对象再使用
    JSON.parse(localStorage.getItem(key))

sessionStorage

存储大小：5mb
存储形式：字符串
期限：会话
语法: 参考localStorage

JSON.stringify()与JSON.parse()

let jsonString = {'name':'张三','age':'13'}
let name1 = JSON.stringify(jsonString)	// 输出一个字符串
let name2 = JSON.parse(name1)	// 将被转化为字符串的数组，又转化回数组