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

小咪咪 2023-07-14 08:27 72阅读 0赞

### 文章目录 ###

*   *  h5离线存储的原理，怎么使用
     *  cookie，sessionstorage，localstorage的区别
     *  Iframe

## 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>