缓存-优快云博客

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/104903419

文章目录

一、Cookie

Cookie是一些数据，存储于电脑上的文本文件中作用就是用于解决“如何记录客户端的用户信息” 当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息

当用户访问web页面时，他的名字可以记录在cookie中
在用户下一次访问该页面时，可以在cookie中读取用户访问记录
cookie缓存存在有效期

Js里简单创建cookie

document.cookie=“tiantian”;

在这里插入图片描述
为cookie添加一个过期时间（以UTC或GMT时间），默认情况下，cookie在浏览器关闭时删除
设置有效期：

document.cookie="tiantian";
var date=new Date();
console.log(date);
document.cookie="username=tiantian;expires=Mon Mar 16 2020 23:41:45 GMT+0800 "

在这里插入图片描述
expires 有效期
path 当前cookie的有效路径不写默认有效路径

读取cookie：

console.log(document.cookie);

删除cookie：只需修改当前cookie的有效期
设置有效期时间为：Thu，01 Jan 1970 00:00:00 GMT 自动过期
如果设置的是中国标准时间 GTM时间要在中国标准时间上 -8
UTC时间直接使用

document.cookie=“username=;expires=Thu，01 Jan 1970 00:00:00 GMT”;

对前端的字符串进行加密（btoa）解密（atob）中文要转码之后再加密（Js-base64）

var str=window.btoa("tiantian");//加密
console.log(str);
console.log(window.atob(str));//解密

中文的转码（escape）和解码（unescape）

二、HTML5缓存 Storage缓存

localStorage 本地电脑缓存永久性（除非删除）
sessionStorage 浏览器客户端缓存客户端（当前窗口）关闭之后就会删除（临时存储）

html5 缓存存储的数据量比较大 cookie存储的数据量较小

session临时缓存（sessionStorage)

设置缓存：键和值

sessionStorage.setItem(“username”,“tiantian”);

读取缓存：

console.log(sessionStorage.getItem（“username”）);

清除缓存：

sessionStorage.clear();

根据键移除缓存：

sessionStorage.removeItem(“username”);

读取session集合的数据长度

console.log( sessionStorage.length);

根据存储的索引返回对应的键：

console.log( sessionStorage.key(0));
存储的顺序是依次往上存储

留言板案例

HTML部分：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            width: 400px;
            height: 700px;
            border: 1px solid #000;
            margin: auto;
        }

        .title {
            text-align: center;
        }

        .top > p {
            margin: 3px 10px;
        }

        .top > p > span {
            display: block;
            font-size: 13px;
        }

        textarea {
            width: 380px;
            height: 200px;
            resize: none;
            font-size: 14px;
        }

        .content {
            margin: auto;
            width: 380px;
            height: 320px;
            overflow-y: scroll;
            border: 1px dashed #000;
        }

        .list {
            padding: 10px;
            border-bottom: 1px dashed #c0c0c0;
        }

        .name {
            display: inline-block;
            font-size: 13px;
            margin-right: 10px;
        }

        .tit {
            font-size: 13px;
            margin: 0 10px;
        }

        .listtime {
            display: inline-block;
            width: 170px;
            font-size: 12px;
            float: right;
            text-align: right;
        }

        .listbot {
            font-size: 13px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="top">
        <h3 class="title">发表留言</h3>

        <p>
            <span>昵称：</span>
            <input id="nickname" type="text"/>
        </p>

        <p>
            <span>标题：</span>
            <input id="title" type="text"/>
        </p>

        <p>
            <span>内容：</span>
            <textarea id="txt" placeholder="输入留言内容...."></textarea>
        </p>

        <p>
            <button id="send">发表留言</button>
            <button id="clear">删除所有留言</button>
        </p>
    </div>
    <div class="content">

    </div>
</div>
</body>
</html>

JS部分：

<script>
    var send = document.querySelector("#send");
    var nickname = document.querySelector("#nickname");
    var titleele = document.querySelector("#title");
    var txt = document.querySelector("#txt");
    var content = document.querySelector(".content");
    var clear = document.querySelector("#clear");
    //声明一个集合  存储 消息
    var arr = [];
    send.onclick = function () {
        var name = nickname.value;
        var title = titleele.value;
        var cont = txt.value;
        var time = new Date();
        //写入缓存
        var data = {
            name: name,
            title: title,
            content: cont,
            time: time.toLocaleString()
        };
        arr.push(data);
        //始终一个键  msg  对应一个集合数据
        localStorage.setItem("msg", window.btoa(escape(JSON.stringify(arr))));
        alert("发表成功！");
        //发表成功之后 自动刷新
        load();
    }

    //页面加载完成   获取缓存
    window.onload = function () {
        load();
    }
    function load() {
        if (localStorage.length) {
            content.innerHTML = "";
            //获取所有的留言
            var data = localStorage.getItem("msg");
            //先对数据解密 在转码
            data = JSON.parse(unescape(window.atob(data)));
            //在这里检测arr  数组里面有没有数据
            if(!arr.length)
            {
                arr=data;
            }
            for (var i = data.length - 1; i >= 0; i--) {
                console.log(data[i]);
                content.innerHTML += createDom(data[i]);
            }
        }
        else {
            alert("还没有人留言！");
            content.innerHTML="";
        }
    }
    //创建dom元素
    function createDom(json) {
        var str = "<div class='list'><div class='listtop'><span class='name'>" + json.name + "</span>:<span class='tit'>" + json.title + "</span><span class='listtime'>" + json.time + "</span></div><div class='listbot'>" + json.content + "</div></div>";
        return str;
    }
    clear.onclick=function (){
        localStorage.clear();
        load();
    }
</script>