LocalStorage 扩容

最新推荐文章于 2024-08-25 08:10:13 发布

东方的csdn

最新推荐文章于 2024-08-25 08:10:13 发布

阅读量1.8k

点赞数

分类专栏：前端分享

本文链接：https://blog.csdn.net/qq_22930381/article/details/104830957

版权

浏览器提供的localStorage本地存储的最大空间是5M，如果不够用呢，这时候就需要考虑来给localStorage扩容。

思路如下：

在【A域】下引入【B域】，【A域】空间足够时，读写由【A域】来完成，数据存在【A域】下；
【A域】空间不够需要在【B域】读写时，通过postMessage 向【B域】发送跨域消息，【B域】监听跨域消息，在接到指定的消息时进行读写操作
【B域】接到跨域消息时，如果是写入删除可以不做什么，如果是读取，就要先读取本域本地数据通过postMessage向父页面发送消息
【A域】在读取【B域】数据时就需要监听来自【B域】的跨域消息

注意事项：

window.postMessage()方法，向【B域】发消息，应用window.frames[0].postMessage() 这样iframe内的【B域】才可以接到
同理，【B域】向【A域】发消息时应用，window.parent.postMessage()
【A域】的逻辑一定要在iframe 加载完成后进行

// index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    <title></title>
    </head>
    <body>
        <button class="set">存储</button>
        <button class="get">读取</button>
        <button class="remove">删除</button>
        <iframe src="http://localhost:8000/storage.html"></iframe>   //嵌入【B域】的一个空页面
    </body>
    <script src="js/localStorage.js"></script>
</html>

// storage.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
 
</body>
<script type="text/javascript">
    var fn = function(){
   };
    fn.prototype = {
   
        setLocal:function(key,value){
   
            localStorage.setItem(key,value);
        },
        getLocal:function(key){
   
            return localStorage.getItem