HTML页面之间跳转与传值（JS代码）

HTML页面之间跳转与传值（JS代码）

跳转的方法如下：

• 方法一：

window.location.href = "b.html";

• 方法二（返回上一个页面，这个应该不算，先放在这）：

window.history.back(-1);

• 方法三：

self.location = "b.html";

• 方法四：

top.location = "b.html";

有关问题的思考：
第一，为什么给window.location和window.location.href赋值时一样的，都可以跳转？
思考：
location 是 location.href 的简写，无论是访问还是赋值。
从功能上，location 等于 location.href；
但从本体理论上，location 是一個对象，location.href 是它的一个属性。

第二，给location赋值的时候，如果跳转的页面不是在同一个目录下，需要把完整的URL写上。如：当前location.href为https://www.google.com/ ，如果要跳转到https://www.baidu.com/, 就不能只是www.baidu.com,必须把URL写完整。
传值的方法如下：

• 方法一：URL传参（？后面的参数）（去哪儿网笔试题，把URL后面的参数解析为对象）

window.location.href = "https://www.google.com/search?q=hello&oq=hello"
function parseURL(url){
    var url = url.split("?")[1];
    var para = url.split("&");
    var len = para.length;
    var res = {};
    var arr = [];
    for(var i=0;i<len;i++){
        arr = para.split("=");
        res[arr[0]] = arr[1];
    }
    return res;
}

• 方法二：cookie传参

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(";");
    for(var i=0;i<ca.length;i++){
        var c = ca[i];
        while(c.charAt(0)==' '){
            c = c.substring(1); 
        }
        if(c.indexof(cname) == 0){
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

• 方法三：H5中Web Storage中的localStorage对象

function Open()
{
    localStorage.clean();//清空LocalStorage
    localStorage.setItem("name","Anakin");
    window.Open("a.html","_blank");
}

或者

localStorage.name= "Anakin";

a.html取值

<script type="text/javascript">

    //取值
    var name=localStorage.getItem("name");
    alert(name);

</script>

弹出的消息即为Anakin
或者

localStorage.lastname;

下面为详细介绍
这里推荐使用h5方法

我首先在开发者工具的Console中，输入了

localStorage.
然后就弹出了一些列宿主（浏览器）提供的localStorage自带的方法，摘录了一些常用的API如下表所示：

清空数据

localStorage.clear()    // undefined    
localStorage            // Storage {length: 0}

存储数据

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage {name: "caibin", length: 1}

读取数据

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
    console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));
}

删除某个变量

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

检查localStorage里是否保存某个变量

// 这些数据都是测试的，是在我当下环境里的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')  // false转为本地字符串

将数组转为本地字符串

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"
将JSON存储到localStorage里

var students = {
    xiaomin: {
        name: "xiaoming",
        grade: 1
    },
    teemo: {
        name: "teemo",
        grade: 3
    }
}

students = JSON.stringify(students);  //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里

var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象

说一下这个纠结的东西：简单说是跨js传递json值，通过localStorage中转，有种压缩和解压缩的味道在。其实应该有个公共的变量.js放在最前面，会不会更好呢。我好像是在这样一个场景下用到的：后台传递json格式的经纬度给前台，前台让它在地图上渲染出来，而且是两个不同的js文件传递，然后就使用了这个方法。不过现在想想应该有其它更好的解决方法吧。