JSON字符串、存储方式

json字符串
json格式的字符串
“abc123truelkgsjhgo” 普通字符串
“

hgahgo

” html格式字符串
键值对格式 键和值都需要用双引号去包括
‘“name”:“yasuo”’

用途

在网络传输时使用。 比如前后端交互。
不能够传输对象和数组的。
只能通过字符串形式去传输数据。

所以说我们如果要传输对象和数组，我们需要将其转换为字符串。
json格式就是满足对象和数组数据结构的一种字符串

使用方法

JSON.parse()
把json格式的字符串转为js中的数组或对象

json.stringify()
把js中的数组或对象转为json字符串

对象转为json字符串后的格式：
‘{“属性名”:“属性值”,“属性名2”:“属性值2”,“属性名3”:“属性值3”}’

        var str = {
            name: "张三",
            age: 18,
            hobby: "乒乓球",
            fun: function() {
                    console.log("猜猜我是谁");

                }
        }
        // 对象转json字符串   JSON.stringify()
        var test = JSON.stringify(str);
        console.log(test);
        // json字符串转对象  JSON.parse()
        var test1 = JSON.parse(test);
        console.log(test1);

数组：
1.存储数组不是对象。
‘[1,2,3,4]’
2.存储数组为对象
‘[{“name”:“亚索”,“age”:“28”,“skill”:“狂风绝息斩”},{“name”:“劫”,“age”:20,“skill”:“瞬狱影杀阵”}]’

 
        var arr = [1, 2, 3, true, "default", false, null, "嬛嬛"];
        // 数组转json字符串
        var array = JSON.stringify(arr);
        //json字符串转数组
        var array0 = JSON.parse(array);
        console.log(array);
        console.log(array0);
        var arr0 = [{
                name: "张三",
                age: 18,
                hobby: "乒乓球",
                fun: function() {
                    console.log("猜猜我是谁");
                }
            }, {
                name: "李四",
                age: 30,
                hobby: "羽毛球"
            },
            1, "嬛嬛"
        ]
        var array1 = JSON.stringify(arr0);
        var array2 = JSON.parse(array1);
        // 数组转json字符串
        console.log(array1);
         //json字符串转数组
        console.log(array2);

数字和布尔值可以不用带双引号

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

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

错误信息：
VM14:1 Uncaught SyntaxError: Unexpected token 亚 in JSON at position 8

本地存储

   不会对服务器造成负担
   提高访问速度
   
   会占用本地内存

   重要的信息不安全

localstorage h5新增的 IE8以下不兼容 5MB
sessionstorage 5M
cookie 4KB

服务器：

数据库

优点：
容量比cookie要大
局限：
有兼容性问题
不会被爬虫获取
本质上是对字符串的读取操作，比较频繁，存储的内容比较多，会导致页面卡顿。

localstorage|sessionstorage

localstorage与sessionstorage的基本操作大致相同，这里只写一个，另一个参考这些就可以
使用：
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.键;

2.3例子

		var str = window.localStorage;
        // 存储键值对
        str["name"] = "张三";
        str.setItem("name1", "李四");
        str.name2 = "王五";
        // 获取值
        console.log(str["name"]);
        console.log(str.name);
        console.log(str.getItem("name"));

4.删除
storage.removeItem(“age”);

str.removeItem("name2");

5.修改：
用同一个键去赋不同的值就是修改

        str["name"] = "阿拉蕾";

6.清除全部
storage.clear();
7.获取所有的键值
【注】 获取所有值(获取值时有两种方法变量1.变量.getItem(“键”)、变量[“键”],不能使用变量.键的方式，因为在获取键的时候，返回的就是一个字符串形式"键")

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

【注意】 localstorage只能存储字符串,如果将对象或者数组放入，取出来时是string类的数据。

如果要存储对象或数组，则先将对象或者数组转为json的字符串，然后再存储，需要时，取出并将其转为对象或数组使用、。

存储事件：永久存储的

同源性：
不同的域名下存储的数据是不共同的

获取所有键或值

获取所有键或所有值(获取值时有两种方法变量.getItem(“键”)、变量[“键”],不能使用变量.键的方式，因为在获取键的时候，返回的就是一个字符串形式"键")

        for (var i = 0; i < str.length; i++) {
            var key = str.key(i);

            var keyValue = str[key];

            console.log(key);
            console.log(keyValue);
        }

cookie

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”

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

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

使用方法：
增 （写入）
document.cookie = “键=值”;
增加时一次只能增加一条

		document.cookie = "name=张三; name1=王五";
        document.cookie = "name1=lisi;";
        document.cookie = "age=2;";

查（读取）
document.cookie
一次时获取cookie中的所有内容
改
同一域名下
document.cookie = “键=新值”;
删
没有删除方法，有过期时间
如果要删除，则将该数据的有效期设置为过期即可。

有效期设置：

document.cookie = “键=值;expires=”+日期;

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

封装 写入键值对

		function setCookie(name, value, exp) {
            var date = new Date();
            // 是否有过期时间
            if (exp == "") {
                document.cookie = name + "=" + value;
            } else {
                date.setHours(date.getHours() - 8);
                // 过期时间为当前时间后exp秒
                date.setTime(date.getTime() + 1000 * exp);
                document.cookie = name + "=" + value + ";expires =" + date;
            }
        }
        setCookie("hobby", "乒乓球", 20);

【注】此验证需要这样操作：封装完函数后，调用。打开网页上观察验证，需要先返回代码编辑的地方，将用函数代码注释或删除，在返回感觉网页，等到时间过期之后再刷新页面，时间过期的键值对就会消失，删除掉了

封装 获取键或值

		function getCookie() {
            // 是否有键值对
            if (document.cookie.length > 0) {
                var arr = document.cookie.split(";");
                for (var i = 0; i < arr.length; i++) {
                    var tmp = arr[i].split("=");
                    console.log(tmp[0]);
                    console.log(tmp[1]);
                }
            }
            return "";
        }
        console.log(getCookie())

获取指定键的值

		function getCookie(key) {
            //  是否有键值对
            if (document.cookie.length > 0) {
                var start = document.cookie.indexOf(key + "=");

                console.log(document.cookie);

                console.log(start);

                if (start != -1) {
                    var end = document.cookie.indexOf(";", start);
                    // 只有一对键值
                    if (end == -1) {
                        end = document.cookie.length;
                    }
                    console.log(document.cookie.substring(start + key.length + 1, end));
                }
            }
        }
        getCookie("name");