localstorage 和 storage 事件用于跨页面通信

最新推荐文章于 2024-03-18 14:45:59 发布

SpringYoungYu

最新推荐文章于 2024-03-18 14:45:59 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/qq_44917015/article/details/115877550

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        跨页面通信
        */
       var table;
       window.addEventListener('storage',storageHandler)
       function storageHandler(){
        if(table){
            table.remove();
            table = null
        }
        // console.log(table)
        var arr = JSON.parse( localStorage.shoppinglist );
        table = document.createElement('table');
        for( var i = 0;i<arr.length;i++ ){
            var tr = document.createElement('tr');
            for( var prop in arr[i] ){
                var td = document.createElement('td')
                td.textContent = arr[i][prop]
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }
        console.log(table)
        document.body.appendChild( table )
       }
       /* 
       todolist
       */
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        商品id<input type="text" name="id"><br>
        商品名称<input type="text" name="name"><br>
        商品单价<input type="text" name="price"><br>
        商品数量<input type="text" name="num"><br>
        <button type="submit">提交</button>
    </form>
    <script>
        localStorage.shoppinglist = JSON.stringify([]);
        var form = document.querySelector('form');
        form.addEventListener('submit',submitHandler)
        function submitHandler(e){
            e.preventDefault();
            var fd = new FormData(form)
            let obj = {}
            for(let val of fd){
                obj[ val[0] ] = val[1]
            }
            let arr = JSON.parse( localStorage.shoppinglist );
            arr.push( obj )
            localStorage.shoppinglist = JSON.stringify( arr )
        }
    </script>
</body>
</html>

SpringYoungYu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
localstorage 和 storage 事件用于跨页面通信

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫