zoukankan      html  css  js  c++  java
  • 前端 使用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
  • 相关阅读:
    阿里云“网红"运维工程师白金:做一个平凡的圆梦人
    3235 战争
    1291 火车线路(区间修改,区间最值)
    P3183 [HAOI2016]食物链
    P1189 SEARCH(逃跑的拉尔夫)
    P1794 装备运输_NOI导刊2010提高(04)
    P2347 砝码称重
    P1332 血色先锋队
    P1772 [ZJOI2006]物流运输
    P1038 神经网络
  • 原文地址:https://www.cnblogs.com/heyiming/p/11344219.html
Copyright © 2011-2022 走看看