前端 使用localStorage 和 Cookie相结合的方式跨页面传递参数

A页面
html代码:
 姓名:<input type="text" id="name1">
 年龄:<input type="text" id="age1">
<button id="click_btn">点击</button>
View Code
js代码:
 // localStorage.name = "张三";
        // localStorage.age = 18;//可存储多组数据


        var btn = document.getElementById("click_btn");
        btn.onclick = function () {
            // var username = 'zhangsan'
            var username = document.getElementById("name1").value;
            // var userage = '13';
            var userage = document.getElementById("age1").value;
            //存放所有值到数组里
            var arrLocalStorage = [username, userage];

            //存储,IE6~7 cookie 其他浏览器HTML5本地存储
            if (window.localStorage) {
                localStorage.setItem("localName", arrLocalStorage);
            } else {
                Cookie.write("localName", arrLocalStorage);
            }

        }

        //参考了 https://blog.csdn.net/ZhushiKezhang/article/details/80360998
View Code
B页面
js代码:
 // var myname = localStorage["name"];//myname 为张三
    // console.log(myname)

    //使用localStorage 和 Cookie相结合的方式传递参数
    
    //条件判断 取localStorage存储值或cookie存储的值
    var StoreDate = window.localStorage ? localStorage.getItem("localName") : Cookie.read("localName");
    var arrStoreDate = StoreDate.split(",");

    console.log(arrStoreDate);//取出所有存储的值

    console.log(arrStoreDate[0]);//取出第一个值 姓名
    console.log(arrStoreDate[1]);//取出第二个值 年龄


    // for  (var i = 0; i < arrStoreDate.length; i++) {
    //     var liHtml = "<li>" + arrStoreDate[i] + "</li>";
    //     $('.list').append(liHtml);
    // }
View Code
posted @ 2019-08-13 10:14  贺小鸣  阅读(968)  评论(0编辑  收藏  举报
为尊重他人劳动成果,转载/摘抄请标明来源!