存储：Cookie/localStorage

说到存储，历久弥新，到现在存留下来并被广泛运用的已经所剩无几了，今天我们就来说说Cookie浏览器存储的localStorage本地存储。
注意：查看本地存储需要在服务器环境下，不要忘了开启XAMPP服务器环境哦！！！
1、Cookie
（1）Cookie是最早的一个存储工具，它的特性是依附于浏览器；且内存较小，只有约4k的大小（大概英文字母可存4000多个，汉字可存2000多个），只能用来存储一些密码啊、用户名啊什么的。当然了能一直沿用至今，就说明了人家有别人替代不了的优点，那就是任何浏览器都支持。咳咳~我们cookie小伙伴还是很友好的嘛。O(∩_∩)O~
（2）cookie的设置

cookie存储的用法：
document.cookie = “键=值”;
所以要想存一个东西在浏览器的话，就直接写这句话在script标签内就可以了
例如：

document.cookie = "name=码丫头萍子";

查看cookie的位置在浏览器的链接栏前面的那个小圆圈倒感叹号那里。
如上，我存了一个name在cookie里，效果图如下（我这边使用的是Chrome浏览器）：

如图所示，选中的那个name就是我刚存进去的。
ok，注意点来了哦，注意注意，大家有没有发现上图中有一个“过期时间”啊，它显示的是浏览会话结束时就过期了，所以cookie能留到现在，它势必会有一个设置过期时间的方法，要不然存了就过期谁还用它啊，对不对。
下面我们就来说说cookie设置保存时间的方法：
这里需要用到JS的日期对象，我们稍微介绍了一点。

var date = new Date();
date.setDate(date.getDate()+3)；
//有了时间设置的cookie语法
document.cookie = "name=码丫头萍子;expires="+date;

以上设置的意思就是这个数据会在三天后过期，也就试试说这个数据会在浏览器上保存三天。
效果图如下：

ok，那细心的小伙伴一定会发现，图片上的过期时间是不对的吧，掐指一算是不是多了8个小时啊，哈哈，别紧张，我们的设置是没错的，只不过它这个时间是按照本初子午线，也就是0时区算的时间，而我们中国处于东八区，所以会有8的小时的时间差，我们只要再加上一个统一时间的API就可以了

document.cookie = "name=码丫头萍子;expires="+date.toUTCString();

效果图如下：

哈哈哈，到这里cookie的设置就完美了。接下来我们说一下该怎么获取到我们自己存储的数值。
（3）获取cookie的值
最简单的我们先来打印一下：

console.log(document.cookie);

打印结果：

哈哈，我又偷偷的添加了两条暴露信息的存储内容，嘘嘘嘘~
正如大家看到的，打印出来的是一个字符串，所以首先我们要先处理一下，因为我们获取的话，肯定是获取的某个准确信息对吗，比如获取name，这个时候就需要取出来对应的值。
处理的过程就是运用字符串和数组的方法对齐进行转化，取值，不做详细赘述，看不明白的可以问我，码丫头一直在哦~
代码如下（这里已封装成函数，设值cookie存储的部分也可以写成函数，小伙伴们可以试试）：

function getCookie(key){
        var arr = document.cookie.split("; ");
        for(index in arr){
            var res = arr[index].split("=");
            if(res[0] == key){
                return res[1];
            }
        }
    }
    ```
    比如我们需要取name的值，就直接调用函数就可以了

console.log(getCookie(“name”));//码丫头萍子

酱紫，到这里cookie的获取也讲完了。
（4）删除存储
那小伙伴们说了，如果要删除那该咋办呢。还记得我们设置的时候有一个时间设置不？延迟过期时间可以设置成正数，那已经过期的不就是不存储的了吗，对不对，所以只需在设置时间的时候，给一个负值就好了，哈哈哈~

var date = new Date();
date.setDate(date.getDate()-1)；
//有了时间设置的cookie语法
document.cookie=”name=码丫头萍子;expires=”+date.toUTCString（）;

“`

（5）cookie到这里就说完了。。。。。。

---

---

2、localStorage本地存储
localStorage的使用就简单多了，没有那么多的弯弯绕绕。
唯一需要注意的就是在使用的时候，需要看看当前浏览器是否支持localStorage就可以了。
设置存储的三种方式：

localStorage.name = 码丫头萍子;//设置name为“码丫头萍子”
localStorage[“name”] = “码丫头萍子”;//设置name为”码丫头萍子“，覆盖上面的值
localStorage.setItem(“name”,”码丫头萍子”);//设置b为”码丫头萍子”

获取存储的三种方式：

var a1 = localStorage[“name”];//获取a的值
var a2 = localStorage.name;//获取a的值
var b = localStorage.getItem(“name”);//获取b的值

同样的它也有删除存储的方式，也就只有一句话：

localStorage.removeItem(“name”);//清除name的值

本地存储在浏览器上的查看位置和cookie一样，具体如下图：

3、Cookie和localStorage的区别
（1）cookie依赖于服务器环境，且是存在浏览器的；localString是本地存储。
（2）cookie的内存只有4k，localStorage的内存达到了5M。
（3）cookie有过期期限，如果不设置过期时间是马上就过期的；localStorage的存储是永久性的。

好了，今天就说到这里，小伙伴们去吃饭饭吧，萍子也要进食了，吧唧吧唧~~~