本地存储：cookie，localstorage

json字符串

1、什么是JSON

“abcd”是普通字符串， “<h1>我是标题</h1>”这是HTML格式的字符串。

JSON本质上也是一种特殊格式的字符串。主要用于前后端的数据交互。前后端交互不能够传输对象和数组的。只能通过字符串形式去传输数据。

诞生的目的是为了取代繁琐笨重的XML格式。（了解即可，现在不需要知道什么是XML）

2、JSON的语法格式

JSON 的语法规则十分简单，创始人借鉴了js的写法，所以与js的语法十分相似。

• 数组用方括号[]表示。
• 对象用大括号{}表示。
• 键/值对 组合成数组和对象。
• 键置于双引号中，不能使用单引号。
• 值有字符串、数值、布尔值、null、对象和数组。（不能使用NaN, Infinity, -Infinity,undefined,函数、正则表达式对象、日期对象）
• 键值对之间用冒号:分割
• 并列的数据之间用逗号,分隔
• 数组或对象最后一个成员的后面，不能加逗号。

`{
    "name": "zhangsan",
    "age": 26
}`

'["zhangsan", "lisi", "wangwu"]'

'[ { "name": "张三"}, {"name": "李四"} ]'

json本质上是一个字符串，只不过它可以看做是js对象的字符串表示法。

3、JSON和js对象的转换

JSON对象是 JavaScript 的原生对象，用来处理 JSON 格式数据。

它有两个静态方法：JSON.stringify()和JSON.parse()，用于JSON和js对象的转换。

JS对象转JSON字符串

JSON.stringify方法用于将一个值转为 JSON 字符串。

var obj = {name:"zhanjsgsan",age:18}
var json = JSON.stringify(obj)//结果：'{"name":"zhanjsgsan","age":18}'

JSON字符串转JS对象

var str = '{"name":"zhanjsgsan","age":18}'
var obj = JSON.parse(str)

【注意】

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

var obj = {
    name:"zhanjsgsan",
    age:18,
    say:function(){
        console.log("hi")
    }}
var json = JSON.stringify(obj)//结果：'{"name":"zhanjsgsan","age":18}'

常见错误

VM14:1 Uncaught SyntaxError: Unexpected token XXX in JSON at position 8

碰到以上这个错误，就说明你的JSON字符串格式出现了错误，无法转为js对象。请仔细检查一下。

cookie

什么是 Cookie？

Cookie 是一些数据, 存储于本地电脑中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie有什么作用?

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”。

应用场景如下：

​ 记住用户名密码：我们今天登录了一个京东的账号。过几天重新打开京东这个页面，发现账号还在登录的状态上。

​ 购物车：我们在未登录状态下，点击加入购物车，过几天重新打开购物车，发现商品仍然存在。

​ 广告：此前访问了大量的健身类网站，cookies记录了你的访问行为，商家就能够根据你的访问行为，向你推送健身类的广告。

Cookie的特点

存储格式

Cookie 以键/值对形式存储，如下所示:

username=zhangsan

多个键值对之间用分号;隔开

'key=value; key2=value2; key3=value3'

存储大小

4kb

同源策略

哪一个域名存储的, 在当前域名下就可以访问。多个域名之间是不会共享的。

时效性

笼统地说，Cookie分为2类：会话Cookie和 持久Cookie。

会话Cookie是一种临时Cookie。用户退出浏览器时，会话Cookie就被删除了。

持久Cookie的生存时间更长一些，他们存储在硬盘上，浏览器退出，计算机重启时，他们仍然存在。

没有指定Expires(过期时间)时，默认为会话Cookie。

Cookie的基础操作

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

【前提】页面必须时在服务器上打开。

【提示】在vscode中通过liveServer插件打开页面，也是将页面在服务器上打开。

添加

语法格式：document.cookie = 'key=value';
document.cookie = 'name=zhangsan'

同时，我们还可以设置有效期。默认是会话级别的时效性

语法格式：document.cookie = 'key=value;expires=日期';
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

获取

var data = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookie，也就是说，不管你存的时候是什么类型，到了cookie中都会自动转为字符串类型。

返回格式：'cookie1=value; cookie2=value; cookie3=value'

修改

修改其实就是将cookie重新添加一遍。如果cookie中没有相应的键名就是设置，已经存在相应的键名就是修改。

//第一次设置是添加
document.cookie = 'name=zhangsan';
//第二次设置就是修改，注意，两次设置key的值是一样的，都是name
document.cookie = 'name=lisi'

删除

只需要设置 expires 参数为以前的时间即可。

//删除时，可以不用在意cookie键值对中的值。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

封装cookie函数

设置 cookie 值的函数

function setCookie(key,value,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
    //toGMTString 转为格林威治时间
  var expires = "expires="+d.toGMTString();
  document.cookie = key + "=" + value + "; " + expires;
}

【注意】日期时间一定要转为格林威治时间。因为服务器的时间默认为格林威治时间，而我们得到的是东8区的时间，会有8个小时的时差

获取 cookie 值的函数

//返回查询结果，查询到返回值，查询不到返回空字符串
function getCookie(key) {
    // 获取cookie字符串，按照；分割
    var tmp = document.cookie.split(';')
    //  遍历 tmp
    tmp.forEach(function (item) {
        // 再按照=进行分割  得到的数组有两个元素，t[0]为key，t[1]为value、
        var t = item.split('=')
        // 判断key是否相等，相等直接返回。
        if (t[0] == key) {
            return t[1];
        }
    })
    //走到这说明没有key，直接返回空字符串。
    return ""
}

localStorage

1、什么是localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

2、基本使用

在使用之前，我们需要知道的一点就是，因为localStorage是H5新增的，所以是存在兼容性问题的。如果是IE6，IE7浏览器是不能使用的。不过，因为目前的IE6/IE7属于淘汰的位置上，我们不需要太过担心兼容性问题。

如果你要处理兼容问题，可以在代码中进行判断，查看浏览器是否支持localStorage

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

我们可以使用 window.localStorage 来创建 、读取、及删除 localStorage 。

添加

//获取localstorage对象
var storage=window.localStorage;
//格式：storage.键名=值
storage.username="zhangsan";
//格式：storage["键名"]=值;
storage["age"]=18;
//格式：storage.setItem("键名",值);
storage.setItem("password","123456");

添加完成后，我们可以在F12开发者工具中，application 中找到storage下面的local Storage查看。

localstorage与cookie一样，只支持string类型的存储。也就是说，存入的数据最终都会转为字符串。

同时localstorage也是支持同源策略的。不同的网站的localstorage的数据是不共通的。

读取

//第一种方法读取  storage.键名
var a=storage.a;
console.log(a);
//第二种方法读取  storage["键名"]
var b=storage["b"];
console.log(b);
//第三种方法读取  storage.getItem("键名")
var c=storage.getItem("c");

只要数据成功存入，使用哪种方式读取都是可以的。不过推荐使用setItem和getItem方法去添加和读取。

修改

和cookie一样，只要key相同，重新赋值就是修改了。

storage.setItem("username","zhangsan");
storage.setItem("username","lisi");

删除

1、 将localStorage中的某个键值对删除

//格式：storage.removeItem("键名")
storage.removeItem("a");

2、将localStorage的所有内容清除

storage.clear();

3、存储注意事项

一般我们会将对象或者数组存入localStorage中，但是在localStorage会自动将对象转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串。

var storage=window.localStorage;
var hero={
    name:'Yasuo',
    sex:'man',
    age:30
};
var jsonStr=JSON.stringify(hero);
storage.setItem("hero",jsonStr);
console.log(storage.hero);

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

//将JSON字符串转换成为JSON对象输出
var jsonStr=storage.getItem("hero");
var hero=JSON.parse(jsonStr);
console.log(hero);

面试题：三者之间的区别

cookie：数据存储，跨页面通讯；

数据每次都会发送给服务端；

前后端都可以操作；

cookie的默认是会话级别的有效期，即页面打开到页面关闭；但可以手动设置过期时间；

只要cookie里面有数据，请求的时候都会自动携带；

存储大小：4KB左右

localStorage:存储数据，跨页面通讯；

不会与服务器端通讯，相对与cookie较安全，不用担心数据被截获；

只能有前端操作，后端操作不了；

存储的时效性是永久的，但是可以手动删除；

请求的时候都不会自动携带；

存储大小：5M左右

sessionStorage：存储数据；

不会与服务器端通讯，相对与cookie较安全，不用担心数据被截获；

只能有前端操作，后端操作不了；

仅在当前会话下有效。只要这个浏览器窗口关闭后就会被销毁；

只能有前端操作，后端操作不了；

存储大小：5M左右；

也就是说,sessionStorage与localStorage唯一的不同就是前者的有效期是会话级别的，后者是永久的