h5离线存储的原理，怎么使用；cookie，sessionstorage，localstorage的区别、Iframe的缺点

最新推荐文章于 2024-05-12 00:22:50 发布

&XYZ&

最新推荐文章于 2024-05-12 00:22:50 发布

阅读量1k

点赞数 1

分类专栏：面试题

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/104854384

版权

面试题专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章目录

h5离线存储的原理，怎么使用

个人总结：

原理：h5的离线存储是基于一个.appcache文件来缓存的，它不是存储技术，我们通过.appcache这个文件来解析离线存储资源，这些资源会被浏览器存储起来，当你电脑没有网的时候，浏览器回通过你存储起来的数据对页面进行展示。

使用：1.页面头部加入一个manifest的属性；2.在cache.manifest文件的编写离线存储的资源；3.在离线状态时，操作window.applicationCache进行需求实现。

cookie，sessionstorage，localstorage的区别

1.cookie中的数据在浏览器和服务器之间来回传送，而localstorage和sessionstorage不会自动把数据发送给服务器，仅在本地保存；

2.cookie数据大小不能超过4k，而localstorage和sessionstorage要远比cookie存储的数据大的多，可以达到5M以上；

3.cookie对于数据保存时间方面和localstorage和sessionstorage是不相同的，cookie在过期时间之前是一直都有效的，即使浏览器关闭，而sessionstorage数据在浏览器关闭后自动就删除了，而localstorage只要你不主动去删除数据，它就一直存在。

Iframe

缺点：

页面不容易管理，因为在iframe框架下会产生很多的页面；
当用户需要打印当前的内容的时候，iframe也是不容易打印的；
当用户在iframe框架下逛着页面，然后他点进去一个新的页面，然后她想通过浏览器的后退按钮返回，这个时候就尴尬了，因为浏览器的后退按钮是无效的。
我觉得iframe最大的一个缺点是对于索引擎的检索程序无法解读这种页面，不利于SEO。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <iframe src="./test.html" name="lm"></iframe>
</body>

<script>
    const oIframe = document.getElementsByTagName("iframe")[0];
    oIframe.onload = function () {
        //方法一：获取iframe内联框架引入进来的子页面里面的值（推荐方法一）
        console.log(oIframe.contentWindow.name)

        //方法二：：获取iframe内联框架引入进来的子页面里面的值（该方法部分浏览器不支持）
        console.log(window.frames['lm'].name)
    }

    var name = 'xyz';

    /*
    window.name:具有跨域的效果；
    举例：你在百度的地址下面输入window.name = 123;回车后，
    在地址栏将百度的地址变成天猫的地址，再在控制台里面输入
    window.name,你会看到打印出来123
    */
</script>

</html>

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

<head>
    <meta charset="UTF-8">
    <title>温故而知“心”</title>
</head>

<body>
    子窗口
</body>
<script>
    var name = "lm";

    //获取父元素窗口里面的值
    console.log(window.parent.name)
    //获取父元素的父元素窗口里面的值（顶级窗口对象）
    console.log(window.top.name)
</script>

</html>

&XYZ&

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
h5离线存储的原理，怎么使用；cookie，sessionstorage，localstorage的区别、Iframe的缺点

文章目录h5离线存储的原理，怎么使用cookie，sessionstorage，localstorage的区别Iframeh5离线存储的原理，怎么使用个人总结：原理：h5的离线存储是基于一个.appcache文件来缓存的，它不是存储技术，我们通过.appcache这个文件来解析离线存储资源，这些资源会被浏览器存储起来，当你电脑没有网的时候，浏览器回通过你存储起来的数据对页面进行展示。使用：...
复制链接

扫一扫

专栏目录