A jquery plug-in every day-understand the cache
Understand the cache
Just know that there are more places to cache data in the page, not just using cookies, so it imitates the page logic of other novel website book banks
The effect is as follows
Code part
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>了解下缓存</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
.row{
width: 100%;
height: 30px;
border-bottom: 1px solid lightgray;
}
.item{
font-size: 12px;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
float: left;
cursor: pointer;
}
.item:hover{
background-color: rgb(81,183,236);
color: white;
}
.item.check{
color:rgb(81,183,236);
}
.row .item:first-child{
pointer-events: none;
}
</style>
</head>
<body>
<div class="row" data-index="f1">
<div class="item">分类1：</div>
<div data-index="0" class="item">全部</div>
<div data-index="1" class="item">1</div>
<div data-index="2" class="item">2</div>
<div data-index="3" class="item">3</div>
<div data-index="4" class="item">4</div>
<div data-index="5" class="item">5</div>
<div data-index="6" class="item">6</div>
<div data-index="7" class="item">7</div>
</div>
<div class="row" data-index="f2">
<div class="item">分类2：</div>
<div data-index="0" class="item">全部</div>
<div data-index="1" class="item">1</div>
<div data-index="2" class="item">2</div>
<div data-index="3" class="item">3</div>
<div data-index="4" class="item">4</div>
<div data-index="5" class="item">5</div>
<div data-index="6" class="item">6</div>
<div data-index="7" class="item">7</div>
</div>
<div class="row" data-index="f3">
<div class="item">分类3：</div>
<div data-index="0" class="item">全部</div>
<div data-index="1" class="item">1</div>
<div data-index="2" class="item">2</div>
<div data-index="3" class="item">3</div>
<div data-index="4" class="item">4</div>
<div data-index="5" class="item">5</div>
<div data-index="6" class="item">6</div>
<div data-index="7" class="item">7</div>
</div>
<div class="row" data-index="f4">
<div class="item">分类4：</div>
<div data-index="0" class="item">全部</div>
<div data-index="1" class="item">1</div>
<div data-index="2" class="item">2</div>
<div data-index="3" class="item">3</div>
<div data-index="4" class="item">4</div>
<div data-index="5" class="item">5</div>
<div data-index="6" class="item">6</div>
<div data-index="7" class="item">7</div>
</div>
</body>
</html>
<script>
$(function(){
//从页面缓存中知道点了哪些分类
var f1 = sessionStorage["f1"]==undefined?'0':sessionStorage["f1"];
var f2 = sessionStorage["f2"]==undefined?'0':sessionStorage["f2"];
var f3 = sessionStorage["f3"]==undefined?'0':sessionStorage["f3"];
var f4 = sessionStorage["f4"]==undefined?'0':sessionStorage["f4"];
//然后就知道当前页面的筛选情况如下
console.log(f1,f2,f3,f4)
//然后给上对应的check
$(".row[data-index='f1']").find(".item[data-index='"+f1+"']").addClass("check")
$(".row[data-index='f2']").find(".item[data-index='"+f2+"']").addClass("check")
$(".row[data-index='f3']").find(".item[data-index='"+f3+"']").addClass("check")
$(".row[data-index='f4']").find(".item[data-index='"+f4+"']").addClass("check")
//假如点击了某个选区，那就把记录存进去然后刷新页面重新执行
$(".item").click(function(){
var item = $(this).attr("data-index");
var row =$(this).parent().attr("data-index");
sessionStorage[row]=item;
window.location.reload()
})
})
</script>
Idea explanation
- When I first started, I tried to make a novel website with existing knowledge. At that time, it was a page that was completely piled up with page logic. It was the kind of pure MVC that did not know Ajax. Among them, I was most impressed by doing it. This multi-condition screening, nothing, but I want to send the entire screening collection back for processing, I only know one way is to pass it back through the get address and then get the data in the background
- So at the time, this gadget was compact and uncomfortable, and each category was a hyperlink that would jump to itself and then pass the parameters back. This was really annoying at the time, but now it’s easy to figure out the general operating logic. Yes, here is the easiest way to complete the effect that was difficult before.
- At this time, I don't store the parameters in the address. Anyway, the page has an effect. Everything is processed by js and then handed over to the background. This makes the background easier to arrange.
- Sessionstorage is used here. The key-value pair object in the page state can store one-to-one data in a session state. In addition, there is always localStorage, which is stored for you by the page in the form of key-value pairs. We only need to read the page down according to the process when the js script is executed, and then control the state of the page display, so that when clicked, the new data will be stored in the page and the page will be refreshed and executed again.