JavaScript 两个存储对象API相互协作

让第一次访问页面后，第二次实现跳转，刷新不影响

大家好，我是懵逼杀手，一个志力于解决新手懵逼的博主，这里我要发一篇，关于js里如何用web存储两个api，localStorage和sessionStorage相互协作工作的简单demo，内容如标题所示，接下来开始正题。

function clickCounter()
{
	if(typeof(Storage)!=="undefined")
	{
		if (localStorage.clickcount)
		{
			localStorage.clickcount=Number(localStorage.clickcount)+1;
			
            console.log(localStorage.clickcount);
		}
		else
		{
			localStorage.clickcount=1;
		}
		
	}
	else
	{
		
	}
}

window.onload = clickCounter();


function q(){
    if(localStorage.clickcount > 1){
	
    window.location.href = "https://www.cnblogs.com/lijshui/p/7451360.html";
  }
}
function alickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount) {
            sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
        } else {
            sessionStorage.clickcount = 1;
        }
        
        console.log(sessionStorage.clickcount);
    } else {
        
    }
}
window.onload = alickCounter()
function mm() {
	if(localStorage.g > 1){
		console.log(localStorage.g);
		return false;
	}else{
		if(sessionStorage.clickcount > 1){
		console.log("刷新一次");
		this.q=function(){return(false)}
}
	}
}
mm();
q();

上面是整个实例写完后的代码，看不懂的新人往后看逻辑运行原理。
首先声明clickCounter()函数，往内部写创建localStorageAPI对象方法，如果页面无检测到存储，将会创建一个存储对象clickcount，localStorage声明个存储对象属性不唯一，它可以一次性声明多个不同变量属性在web浏览器里缓存给与他们不同的操作工作，这里我只用一个clickcount示范。
window.onload = clickCounter(); 让存储能在页面进入第一时间执行缓存工作，clickCounter()函数里if判断存在了localStorage的值，然后function q(){
if(localStorage.clickcount > 1){

window.location.href = "https://www.cnblogs.com/lijshui/p/7451360.html";

}
}
q();方法执行读取存储对象属性值，简单判断是否大于1，便可执行页面跳转，但是在此之前如果有刷新的情况（刷新相当于重新进入页面），页面便会缓存大于1，在第一次进入页面就跳转了，而我们要解决这个情况然后就用到了他的兄弟sessionStorage //临时会话存储, 他的存储只针对页面，页面载入增加值为1，如上面localStorage类似。

function alickCounter() {
if(typeof(Storage) !== “undefined”) {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}

    console.log(sessionStorage.clickcount);
} else {
    
}

}
window.onload = alickCounter()
q();
上面是他的创建函数，缓存方法声明后，再来一段function mm() {
if(localStorage.g > 1){
console.log(localStorage.g);
return false;
}else{
if(sessionStorage.clickcount > 1){
console.log(“刷新一次”);
this.q=function(){return(false)}
}
}
}
mm();
mm();方法用来监听值增加，大于2情况调用q()修改布尔值为false 函数执行在q()前面，q()被修改了执行状态，保证刷新不会触发要读取localStorage执行的方法

以上实例讲解完毕，这是博主第一次写博客文章，有哪里需要改进地方欢迎留言。