json字符串，localStorage本地存储

格式；

键值对格式 键和值都需要用双引号去包括

 '{"name":"yasuo"}'

json用途：

• 在网络传输时使用。 比如前后端交互。
• 不能够传输对象和数组的。
• 只能通过字符串形式去传输数据。
• 所以说我们如果要传输对象和数组，我们需要将其转换为字符串。
• json格式就是满足对象和数组数据结构的一种字符串

json的使用方法：

        JSON.parse()
            把json格式的字符串转为js中的数组或对象
        json.stringify()
            把js中的数组或对象转为json字符串
        对象：
            '{"属性名":"属性值","属性名2":"属性值2","属性名3":"属性值3"}'
        数组：
            1.存储数组不是对象。
                '[1,2,3,4]'
            2.存储数组为对象
                '[{"name":"亚索","age":"28","skill":"狂风绝息斩"},{"name":"劫","age":20,"skill":"瞬狱影杀阵"}]'
               
        数字和布尔值可以不用带双引号

        对象在转json字符串时，函数会被自动过滤掉。

        parse() 这个方法会新创建一个对象或数组

对象与数组转换为字符串

代码如下

 var obj={
            name:'亚索',
            age:'32',
            skill:"狂风绝息斩"
        }
        var json=JSON.stringify(obj);
        console.log(json);//{"name":"亚索","age":"32","skill":"狂风绝息斩"}
        var newstr=JSON.parse(json);
        console.log(newstr);//[1,2,3,"陈先生到处都是"]

localStorage本地存储

本地：
1. 不会对服务器造成负担
2. 提高访问速度
3. 会占用本地内存
4. 重要的信息不安全

• localstorage h5新增的 IE8以下不兼容 5MB
• sessionstorage 5M
• cookie 4KB
  服务器：
  数据库
  优点：
  容量比cookie要大
  局限：
  有兼容性问题
  不会被爬虫获取
  本质上是对字符串的读取操作，比较频繁，存储的内容比较多，会导致页面卡顿。
  使用：
  1.先考虑兼容性问题

      if(!window.localStorage){
                    alert("该浏览器不支持localstorage！")
                    return false;
                }else{
                    //业务逻辑
                }

2. 将数组存储到localstorage
   三种写法：

  key  value     
 storage["name"] = "yasuo";
 storage.setItem("name","sss")
 storage.age = 18;

3.读取

  storage["键"];
  storage.getItem("键")
   storage.键;

4.删除

  storage.removeItem("age");

5.修改：
用同一个键去赋不同的值就是修改
6.清除全部

   storage.clear();

7.获取所有的键值

 			for (var i = 0; i < storage.length; i++) {
                    var key = storage.key(i);
                    var value = storage.getItem(key); 
                }

【注意】 localstorage只能存储字符串,如果将对象或者数组放入，取出来时是string类的数据。
如果要存储对象或数组，则先将对象或者数组转为json的字符串，然后再存储，需要时，取出并将其转为对象或数组使用、。
存储事件：永久存储的
同源性：
不同的域名下存储的数据是不共同的。

共同点：

都是将数据存储在本地中
只能存储字符串
区别：
localstorage 永久存储的 除非手动删除
sessionstorage 会话缓存
会话结束时失效
1.代码控制结束

2.浏览器关闭/窗口关闭

cookie:

用来存储浏览器端的本地数据

特点：
1.按照域名来存储的
不同的域名下的cookie数据不共通。
2.有存储的路径
127.0.0.1:8080/a/b.html cookie /a/b /
127.0.0.1:8080/b/b.html cookie /b/b
3.cookie 存储的数据格式
“键1=值1;键2=值2”

存储大小

4KB 50条左右
5.时效性：
默认是会话级别
我们可以手动设置cookie的过期时间
6.操作权限
前端可以操作
后端可以操作
7.发送请求时，cookie中的数据会被自动传输到后端

8.cookie只能在域名环境下才可以使用

使用方法：

增 （写入）

 document.cookie = "键=值";

增加时一次只能增加一条
查（读取）

   document.cookie

一次时获取cookie中的所有内容
改
同一域名下

 document.cookie = "键=新值";

删
没有删除方法，有过期时间
如果要删除，则将该数据的有效期设置为过期即可。

有效期设置：

 document.cookie = "键=值;expires="+日期;

服务器的时间以格林威治事件为准的

    toUTCString() 转换为格林威治时间

设置cookie

 function setCookie(name, value, expires) {
            if (expires == null) {
                document.cookie = name + "=" + value;
            } else {
                var exDate = new Date();
                exDate.setHours(exDate.getHours() - 8);
                exDate.setTime(exDate.getTime() + 1000 * expires);
                document.cookie = name + "=" + value + ";expires =" + exDate;
            }
        }

获取cookie

方法1 分割字符串

 function getCookie(key) {
            if (document.cookie.length > 0) {
                var arr = document.cookie.split(";");
                for (var i = 0; i < arr.length; i++) {
                    // 分割完以后有空格，必须删除
                    var t = arr[i].trim().split('=');
                    if (t[0] == key) {
                        return t[1];
                    }
                }   
            }
        } 

方法2 利用indexOf和substring。

 function getCookie(key) {
            if (document.cookie.length > 0) {
                if (document.cookie.indexOf(key)==0) {
                    var start = key.length + 1;
                    var end = document.cookie.indexOf(';',start);
                    if (end == -1) {
                        end = document.cookie.length;
                    }
                    return document.cookie.substring(key.length + 1,end);
                }
                var start = document.cookie.indexOf('; '+ key +'=' )+2;
                if (start != 1) {
                    var end = document.cookie.indexOf(";", start);
                    if (end == -1) {
                        end = document.cookie.length;
                    }
                    return document.cookie.substring(start + key.length + 1, end);
                }
            }
            return "";
        }