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

因为项目需要，分别写了移动端和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是所有浏览器都支持的，有时间可以尝试一下 ：）