学习笔记（三）storage事件

最新推荐文章于 2020-07-06 19:27:44 发布

370370370370370

最新推荐文章于 2020-07-06 19:27:44 发布

阅读量301

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_36486067/article/details/105804265

版权

学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

发现了一个神仙事件，让我头疼的购物车变得不再头疼。

storage事件

解释：同域中的存储状态检测，设置storage事件的网页能够时事获取同域其他网页的存储状态。
事件注册对象为windows。
任何数据存储在cookie，storage中都必须使用字符串存储。

示例：制作一个表单提交网页，在另一个页面里时事获取填写的表单内容并打印成表格。
设置localStorage存储数据的网页

<!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>
    <form action="">
        <p>
            <label for="">编号</label>
            <input type="text" name="ids">
        </p>
        <p>
            <label for="">商品</label>
            <input type="text" name="goodsName">
        </p>
        <p>
            <label for="">价格</label>
            <input type="text" name="price">
        </p>
        <p>
            <label for="">数量</label>
            <input type="text" name="num">
        </p>
        <input type="submit">
    </form>
    <script>
        //localStorage.commodityList="[]";
        var form=document.querySelector("form");      
        form.addEventListener("submit",submitChandler);
        function submitChandler(e){
            e.preventDefault();           
            var fd=new FormData(form); 
            var obj={};
            for(let value of fd){
                obj[value[0]]=value[1];               
            }
            var arr=JSON.parse(localStorage.commodityList);
            arr.push(obj);
            localStorage.commodityList=JSON.stringify(arr);
        }
    </script>
</body>
</html>

设置storage事件的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 600px;
            border-collapse: collapse;
        }
        td{
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
    <script>
        var table;
        window.addEventListener("storage",storageChandler);
        function storageChandler(e){
            createCommodityTable();
        }
        function createCommodityTable(){
            if(table){
                table.remove();
                table=null;
            }
            var arr=JSON.parse(localStorage.commodityList);
            console.log(arr);
            table=document.createElement("table")
            for(var i=0;i<arr.length;i++){
                var tr=document.createElement("tr");
                table.appendChild(tr);
                for(var prpo in arr[i]){
                    var td=document.createElement("td");
                    td.textContent=arr[i][prpo];
                    tr.appendChild(td);
                }
                document.body.appendChild(table);
            }
        }
    </script>
</body>
</html>

370370370370370

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记（三）storage事件

发现了一个神仙事件，让我头疼的购物车变得不再头疼。storage事件解释：同域中的存储状态检测，设置storage事件的网页能够时事获取同域其他网页的存储状态。事件注册对象为windows。任何数据存储在cookie，storage中都必须使用字符串存储。示例：制作一个表单提交网页，在另一个页面里时事获取填写的表单内容并打印成表格。设置localStorage存储数据的网页<!...
复制链接

扫一扫