Web存储

最新推荐文章于 2023-06-17 00:21:47 发布

SuwanH

最新推荐文章于 2023-06-17 00:21:47 发布

阅读量191

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/SuwanH/article/details/120294269

版权

一、cookie

1.cookie的特点：

（1）数据持久型，即数据在浏览器关闭时才删除

（2）cookie可配置到期，控制其生命周期，使之不会永远有效

2.cookie的方法

（1）利用Cookies.get()来创建cookie以及cookie的内容

（2）expires可用来设置cookie的有效时间

（3）利用Cookies.set()来获取cookie内容

（4）利用Cookies.remove()来清除cookie的内容

实例：

<!-- 引入cookie -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>


<body>
    <script>
        //创建cookie 包括内容区域以及设置7天后到期
        Cookies.set('name','wan',{expires:7});
        //获取cookie
        Cookies.set('name');
        //清除cookie
        //Cookies.remove('name');
    </script>
</body>

打开页面中的存储，即可查到cookie存储信息

若使用清除Cookie，则页面存储会清空

二、sessionStorage

1.特点：

（1）仅在当前页面下有效，关闭页面或浏览器时会被清除

（2）打开多个相同的URL的页面，会创建各自的sessionStorage，关闭对应浏览器会清除相应的sessionStorage

（3）页面重新加载或恢复页面仍会保持原来的页面会话

2.方法：

（1）利用sessionStorage.setItem()来创建sessionStorage对象

（2）利用sessionStorage.getItem()来获取sessionStorage对象

（3）利用sessionStorage.remove()来移除单个的sessionStorage对象

（4）利用sessionStorage.clear()来清空sessionStorage所有对象

<!-- 引入cookie -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js">                </script>
<body>
    <script>
        // 创建sessionStorage对象 创建两个
        sessionStorage.setItem('username','su');
        sessionStorage.setItem('age',21);
        // 获取sessionStorage对象
        sessionStorage.getItem('username','age');
        // 移除单个sessionStorage对象
        // sessionStorage.removeItem('username')
        // 清空sessionStorage对象
        // sessionStorage.clear();
    </script>
</body>

在页面的存储中显示：

移除单个时：

清空时：

若创建sessionStorage时，传入的是对象类型，需要将其转换为字符串，在获取到sessionStorage后，若想拿到对象中的属性时，又要将其转换为对象格式

<!-- 引入cookie -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js">                </script>
<body>
    <script>
        // 若传进的内容是对象类型
        sessionStorage.setItem('person',JSON.stringify({
            name:'wan',
            age:21
        }))
        // 获取sessionStorage对象
        var namePerson = JSON.parse(sessionStorage.getItem('person')).name;
        console.log(namePerson);
    </script>
</body>

其中页面控制台可打印其对象内的属性值

其存储页面，也有对应的内容

三、localStorage本地存储

1.特点：

（1）localStorage 会可以将第一次请求的数据直接存储到本地

（2）可以将请求得到的数据和用户习惯性行为的信息存储在本地，不用重复请求服务器，提升响应速度

2.方法：

（1）利用localStorage.setItem()来创建localStorage

（2）利用localStorage.getItem()来获取localStorage

（3）利用localStorage.remove()来移除localStorage

（4）利用localStorage.clear()来清空localStorage

<!-- 引入cookie -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js">                </script>
<body>
    <script>
        // 创建localStorage对象 两个
        localStorage.setItem('username','H');
        localStorage.setItem('age',18);
        // 获取localStorage对象
        localStorage.getItem('username','age');
        // 移除localStorage对象
        // localStorage.removeItem('username');
        // 清空localStorage对象
        // localStorage.clear()
    </script>
</body>

此时的存储页面：

存储对象类型

<!-- 引入cookie -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js">                </script>
<body>
    <script>
        localStorage.setItem('person',JSON.stringify({
            name:'SWX',
            age:19
        }))
        var agePerson = JSON.parse(localStorage.getItem('person')).age;
        console.log(agePerson);
    </script>
</body>

此时之前的本地数据也会存在，控制台输出age值

四、通信

1.跨文本消息传输

（1）可利用window.open()打开另一个页面

（2）可通过postMessage()来发送数据

（3）利用iframe嵌套页面

（4）iframe节点.contentWindow()取得该对象

<!-- 页面A -->
<body>
    <div>SuwanH - page - A</div>
    <button id="openB">跳转</button>
    <button id="iframe">内嵌</button>
    <button id="sent">发送数据</button>
    <iframe src="././page-B.html" width="200" height="200" frameborder="0"></iframe>
</body>
<script>
    var openB = document.getElementById('openB')
    var iframe = document.getElementById('iframe')
    var sent = document.getElementById('sent');
    var iframes = document.getElementsByTagName('iframe')[0]
    let win;//相当于otherWindow
    openB.onclick = function(){
        win = window.open('./page-B.html')
    }
    iframe.onclick = function(){
        win = iframes.contentWindow;
    }
    sent.onclick = function(){
        win.postMessage('wan')
    }
</script>

<!--页面B-->
<style>
        div{
            width: 150px;
            height: 150px;
            background-color: palevioletred;
        }
</style>
<body>
    <div>SuwanH - page - B</div>
    <script>
        // 接收数据
        window.onmessage = function(event){
            console.log(event.data);
        }
    </script>
</body>

即可在页面A点击按钮时对页面B进行操作

SuwanH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web存储

一、cookie1.cookie的特点：（1）数据持久型，即数据在浏览器关闭时才删除（2）cookie可配置到期，控制其生命周期，使之不会永远有效2.cookie的方法（1）利用Cookies.get()来创建cookie以及cookie的内容（2）expires可用来设置cookie的有效时间（3）利用Cookies.set()来获取cookie内容（4）利用Cookies.remove()来清除cookie的内容实例：<!-- 引入cookie --&gt
复制链接

扫一扫