通过sessionStorage来根据屏幕宽度变化来跳转不同的html页面

因为开发的需要，PC端口和移动端要分开两个使用，在不使用框架的情况下如何通过判定屏幕的大小将页面进行跳转

通过搜索查询到如下方法，现将作者的方法转载：

 

因为项目需要，分别写了移动端和PC端的两个html页面，现在需要根据不同的屏幕宽度来加载对应的页面。

先说一下本人的思路--

刚开始我直接在加载页面的时候判断屏幕宽度，然后加载相应的页面，大家是不是也想到会出现什么效果了？

没错，这个时候就出现了浏览器一直在加载切换页面的死循环！因为每次刷新页面都执行同一段js代码。。。

所以就要想办法存储刷新前的屏幕大小状态，在刷新页面的时候拿刷新前状态与刷新后状态对比，然后再决定加载哪个页面。

那么问题就来了，我们通过什么来存储这个状态呢？

这个时候就想起了h5的新特性(本地存储):

1. localStorage 长期存储数据，浏览器关闭后数据不丢失；

2. sessionStorage 的数据在浏览器关闭后自动删除。

而这次主要是通过临时存储(sessionStorage)来判断根据屏幕宽度变化来加载对应的页面的，直接看js代码：

// 通过临时存储(sessionStorage)来判断根据屏幕宽度变化来加载 移动端页面 / PC端页面
 
var indexUrl = "http://192.168.10.173:8020/art-preSale/index.html?__hbt=1515730525577";   //PC端
var indexMobileUrl = "http://192.168.10.173:8020/art-preSale/index-m.html?__hbt=1516171504432"; //移动端
 
var newState = 0;    //记录当前是大屏幕(1)还是小屏幕 (0)
resizeUnit();   //初始化加载页面
 
//浏览器窗口变化时也要初始化加载页面
window.onresize = function(){
    resizeUnit();
}
 
/**
 * 刷新页面时加载对应的页面
 * @param {Object} width    加载不同页面的分界点(屏幕宽度),默认不传参就是768
 */
function resizeUnit(width){
    var width = width || 768;
    var windowWidth = window.innerWidth; //获取可视窗口大小
    //var windowWidth = window.screen.width;
    // 判断窗口大小  以传入的宽度为分界点
    if(windowWidth<width){
        newState = 0;
    }else {
        newState = 1;
    }
    //判断sessionStorage是否存在 "oldState"
    if(sessionStorage.getItem('oldState')){
        //刷新后sessionStorage已保存有刷新前的状态，则获取该值，与当前状态值进行对比
        var oldState = sessionStorage.getItem('oldState');
        if(newState!=oldState){
            sessionStorage.setItem('oldState', newState);  // 重置为当前状态值
            getHtml(newState);  // 跳转到相应的html页面
        }
    }else{
        //保存刷新前的状态数据到sessionStorage
        sessionStorage.setItem('oldState', newState);  //初始化的时候设置
        getHtml(newState);
    }
}
 
/**
 * 根据状态跳转相应的html页面
 * @param {Object} state    当前屏幕宽度的状态 （1为大屏幕，0为小屏幕）
 */
function getHtml(state) {   
    if(state==1){ 
        window.location.replace(indexUrl);
    }else if(state==0){ 
        window.location.replace(indexMobileUrl);
    }
};

以上代码经测试是可行的，有问题欢迎提出哦！

有人跟我推荐使用浏览器本身的cookie来实现加载不同页面的功能， 因为cookie是所有浏览器都支持的，有时间可以尝试一下 ：）

转载地址：https://www.cnblogs.com/stella1024/p/8303297.html