8.H5新增API-Storage对象（储存）

最新推荐文章于 2024-09-13 23:32:49 发布

青春如梦952

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量78

点赞数

分类专栏： H5C3篇文章标签：前端

本文链接：https://blog.csdn.net/qq_69946766/article/details/132481772

版权

H5C3篇专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.存储有效期和作用域

localStorage

通过localStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户通过设置浏览器配置来删除，数据将一直保留在用户的电脑上，永不过期

同源策略

协议域名端口号一致就可以访问其内容

如果其中一项不同就违背了同源策略就访问不到 - 跨域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 同源策略
        // 协议 域名 端口号一致 就可以访问其内容
        // 如果其中一项不同就违背了同源策略 就访问不到 - 跨域

        // 永久性存储 
        // window.localStorage

        // setItem 设置当前值（key，value）
        // getItem 获取存储在本地的数据(key)
        // removeItem 删除某一个本地存储数据（key）
        // clear 清空所有

        // 设置存储数据
        localStorage.setItem('anhao', '天王盖地虎');
        localStorage.setItem('anhao1', '天王盖地虎1');
        localStorage.setItem('anhao2', '天王盖地虎2');
        localStorage.setItem('anhao3', '天王盖地虎3');
        // 获取存储数据
        var rel = localStorage.getItem("anhao");
        console.log(rel);

        // 删除
        // localStorage.removeItem("anhao");

        // 清除所有
        // localStorage.clear();

        // 获取存储的所有值
        console.log(localStorage.key(0));
        console.log(localStorage.key(1));
        console.log(localStorage.key(2));
        // 遍历当前的loaclStorage 对象 
        for (var i = 0; i < localStorage.length; i++) {
            console.log(localStorage.key(i), localStorage[localStorage.key(i)]);
            // localStorage[localStorage.key(i)]
        }
    </script>
</body>

</html>

sessionStorage

通过sessionStorage存储的数据有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了，那么所有通过sessionStorage存储的数据也都被删除了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    sessionStorage
    <script>

        // 临时存储 当页面关闭时就失效
        sessionStorage.setItem("sessionCode", "to day is 不热");
        // sessionStorage 即使同源也不共享数据 只在当前页面有效
        var rel = sessionStorage.getItem("sessionCode")
        console.log(rel);

        // 删除
        // sessionStorage.removeItem("sessionCode");

        // 清空所有
        // sessionStorage.clear();
    </script>
</body>

</html>

存储事件

与存储事件相关的事件对象有5个非常重要的属性：

key : 修改或删除的key值，如果调用clear()时，该属性值为null

newValue: 新设置的值，如果调用removeItem()时，该属性值为null

oldValue : 调用改变前的value值；添加新项时，该属性值为null

storageArea : 当前的storage对象

url : 触发该存储变化脚本所在文档的URL（也就是说哪个页面修改的数据）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 这个页面触发 存储事件
        // - key : 修改或删除的key值，如果调用clear()时，该属性值为null
        // - newValue: 新设置的值，如果调用removeItem()时，该属性值为null
        // - oldValue : 调用改变前的value值；添加新项时，该属性值为null
        // - storageArea : 当前的storage对象
        // - url : 触发该存储变化脚本所在文档的URL（也就是说哪个页面修改的数据）
        window.addEventListener("storage", function (obj) {
            console.log(obj);
            console.log(obj.key);
            console.log(obj.newValue);
            console.log(obj.oldValue);
            console.log(obj.storageArea);
            console.log(obj.url);
        })
    </script>
</body>

</html>