事件（存储事件）

章鱼Cc_yoo

已于 2022-05-25 17:11:09 修改

阅读量203

点赞数

文章标签：服务器运维 javascript

于 2022-05-25 17:09:52 首次发布

本文链接：https://blog.csdn.net/Cc200171/article/details/124968598

版权

事件的存储

1.cookie

（1）cookie的构成：

名称：一个唯一确定cookie的名称

值：储存在cookie中的字符串

域：cookie对于哪个域是有效的

路径：指定域中的指定路径

失效时间：cookie何时应该被删除的时间戳

安全标志：指定后，cookie只有在使用SSL连接时才发送到服务器（设置secure标志）

（2）cookie的限制

绑定在特定域名下，无法跨越

所有cookie的累加长度限制为4KB，超长会被忽略

（3）JS中的cookie ==>document.cookie

获取：返回当前页面可用的所有cookie的字符串，由分号和空格隔开的一系列名值对（ name1=value1；name2=vlaue2；）

添加：cookie的值必须写成key=value的形式，且等号两边不能有空格；

写入时必须有分号、逗号和空格进行转义；

一次只能写入一个cookie，并且写入不是覆盖，而是添加；

cookie的属性：

1》value必须项目，用于指定cookie的值

2》expires指定cookie过期时间

3》domain指定cookie所在域名

4》path属性指定路径，必须是绝对路径

5》secure指定cookie只能在加密协议https下发送到服务器

6》httpOnly设置该cookie不能被JS读取

<script>
    var exp = new Date();
    exp.setTime(exp.getTime() + 100000);
    // 添加一些东西
    document.cookie = 'name=zxy;expires=' + exp.toGMTString();
    document.cookie = 'age=18;expires=' + exp.toGMTString();

    console.log('cookie ==== ' + document.cookie);
</script>

2.window.localStorage 和 window.sessionStorage

(1) window.localStorage 本地存储，存储的数据没有过期时间

语法：myStorage = localStorage；返回一个Storage对象；

添加：localStorage.setltem('key','value')；

获取：localStorage.getIitem('key')；

移除：localStorage.removeItem('key')；

清空：localStorage.clear()；不接受参数，清空存储对象里的所有数据；

（2）window.sessionStorage 会话存储，存储的数据会在浏览器会话结束时被清除

语法：myStorage = sessionStorage；返回一个Storage对象；

添加：sessionStorage.setltem('key','value')；

获取：sessionStorage.getIitem('key')；

移除：sessionStorage.removeItem('key')；

清空：sessionStorage.clear()；不接受参数，清空存储对象里的所有数据；

如何实现跨页面传值

1.a标签或者location.href

2.存储（cookie、localStorage、sessionStorage）

1.html

<body>
    <input type="text">
    <button>22222222</button>
</body>
<script>
    var ipt = document.querySelector("input")
    var btn = document.querySelector("button");
    btn.onclick = function() {
        // location.href = '2.html?name=' + ipt.value;
        localStorage.name = ipt.value;
        location.href = '3.html';
    }
</script>

2.html

<body>
    诗人： <span id="author"></span>
</body>
<script>
    function search2Obj() {
        var data = location.search.substr(1);
        // data = 'key1=value1&key2=value2'
        var arr = data.split('&');
        // arr = ['key1=value1', 'key2=value2'];
        var obj = {};
        arr.forEach(function(item) {
            var arr2 = item.split("=");
            // arr2 = ['key1', 'value1']
            var key = arr2[0];
            var value = arr2[1];
            obj[key] = value;
        })
        return obj;
    }
    var data = search2Obj();
    var span = document.getElementById("author");
    span.innerHTML = data.name;
</script>

3.html

<body>
    <p></p>
</body>
<script>
    var p = document.querySelector('p');
    p.innerHTML = localStorage.name;
</script>

cookie、localStorage、sessionStorage区别

cookie 存储量小受到限制，设置过期时间删除，前后端自动同步；

localStorage 存储量大，需手动删除；

sessionStorage 临时存储，关闭浏览器自动清除；

章鱼Cc_yoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件（存储事件）

事件的存储1.cookie（1）cookie的构成：名称：一个唯一确定cookie的名称值：储存在cookie中的字符串域：cookie对于哪个域是有效的路径：指定域中的指定路径失效时间：cookie何时应该被删除的时间戳安全标志：指定后，cookie只有在使用SSL连接时才发送到服务器（设置secure标志）（2）cookie的限制绑定在特定域名下，无法跨越 ...
复制链接

扫一扫