当前位置：网站首页>Realize page return to parent directory based on cookies
Realize page return to parent directory based on cookies
2022-07-24 08:35:00 【Ashan classmate】
be based on cookie Return the page to the parent directory
Realization principle
adopt cookie Pass in parameters during jump , Then analyze after the jump is successful cookie Data then , After clicking back , Determine the returned page by reading the value
Reading expansion ： About node.js And front-end to browser cookit The operation of
Add extensions ：express course
Preface
1, Because it's a demonstration demo So it's not used here MD5 Simplified versions of encryption and interface parameters are easy to understand
2, This article is about 9325 word （ Code and explanation ） It takes about 25 minute
3, Because there may be some code errors, the project link is prepared : demo download （ No need to pay and download points ）
If you think it's well written, don't forget to click three times
ordinary cookie operation
cookie Is a string written in the local file ,cookie The maximum length of is only 4KB by 4096 Bytes , But it is enough to realize some operations , Generally, some local configurations are stored , Or your login information （ Encrypted key or server authentication information ）, This is why your account and password have not been disclosed after you visit some unsafe websites, but your account has been stolen , Is based on cookie
Some basic operations
View the current cookie
// Console input
window.document.cookie
Take Baidu for example , Baidu here cookie It's encrypted. , Generally, encryption is used in projects , Because of security （ Mainstream MD5 encryption ）
Set up cookie
1, Embed code
const cookies = "user=startrr,password=123456";
// Get the account location
window.document.cookie = cookies;
2, Console code
const cookies = "user=startrr,password=123456";
// Get the account location
window.document.cookie = "user=startrr,password=123456";
// Format
window.document.cookie = " Required cookie";
// It depends on your value , Just change the assignment
practice 
eliminate cookie
In a word, it is to eliminate cookie Assign a value to o Or clear it directly
Assign to null
var arr="user=,password=,fid=,to="
window.document.cookie=arr
// It depends on your value , Just change the assignment to null
Clear completely
const clearCookies = document.cookie
.split(";")
.forEach(
(cookie) =>
(document.cookie = cookie
.replace(/^ +/, "")
.replace(/=.*/, `=;expires=${
new Date(0).toUTCString()};path=/`))
);
After knowing the basic usage, let's start serving hard dishes ！
Start implementation
demo Meet your needs
1, Jump over after requesting a page , When you click to return to the page, you will jump back *
2, There can be no infinite jump cycle
3,…
Ready to file
establish index.html Then write the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1> Home page </h1>
<button onclick="user('xihuan')"> user </button>
<button onclick="msg('xihuan')"> Chat </button>
<button onclick="ers()"> Parsing parameters </button>
<script>
function ers() {
var cookies = window.document.cookie;
if (cookies.indexOf(",to=") == -1) {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, cookies.length);
console.log(user,password)
} else {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
const fidlen = cookies.indexOf(",fid=");
// obtain fid
const tolen = cookies.indexOf(",to=");
// Get the superior Directory
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen+10, fidlen);
// fid
var fid = cookies.slice(fidlen+5, tolen);
// Superior directory
var to = cookies.slice(tolen+4, cookies.length);
console.log(user,password,fid,to)
}
}
// analysis cookie
const cookies = "user=startrr,password=123456";
// Get the account location
window.document.cookie = cookies;
function user(x) {
var cookies=window.document.cookie
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, cookies.length);
console.log(user,password,x)
window.document.cookie=`user=${
user},password=${
password},fid=${
x},to=index`
location.href="./user.html"
}
function msg(x) {
var cookies=window.document.cookie
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, cookies.length);
window.document.cookie=`user=${
user},password=${
password},fid=${
x},to=index`
location.href="./userimg.html"
}
</script>
</body>
</html>
establish user.js Then write the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1> user </h1>
<span id="innerdoc"></span>
<button onclick="exit()"> return </button>
<button onclick="togo()"> User details </button>
<button onclick="ers()"> Parse Directory </button>
<script>
function ers() {
var cookies = window.document.cookie;
if (cookies.indexOf(",to=") == -1) {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, cookies.length);
console.log(user,password)
} else {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
const fidlen = cookies.indexOf(",fid=");
// obtain fid
const tolen = cookies.indexOf(",to=");
// Get the superior Directory
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen+10, fidlen);
// fid
var fid = cookies.slice(fidlen+5, tolen);
// Superior directory
var to = cookies.slice(tolen+4, cookies.length);
// obtain id'
var innerdoc=document.getElementById('innerdoc')
innerdoc.innerHTML=` Current directory ：${
to}>usermsg.html`
console.log(user,password,fid,to)
}
}
// User details
function togo() {
var cookies = window.document.cookie;
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
const fidlen = cookies.indexOf(",fid=");
// obtain fid
const tolen = cookies.indexOf(",to=");
// Get the superior Directory
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen+10, fidlen);
// fid
var fid = cookies.slice(fidlen+5, tolen);
// Superior directory
var to = cookies.slice(tolen+4, cookies.length);
window.document.cookie=`user=${
user},password=${
password},fid=${
fid},to=user`
location.href="./userimg.html"
}
// Judgment return
function exit() {
var cookies = window.document.cookie;
if (cookies.indexOf(",to=") == -1) {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, cookies.length);
console.log(user,password)
window.document.cookie=`user=${
user},password=${
password}`
exito(1)
} else {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
const fidlen = cookies.indexOf(",fid=");
// obtain fid
const tolen = cookies.indexOf(",to=");
// Get the superior Directory
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen+10, fidlen);
// fid
var fid = cookies.slice(fidlen+5, tolen);
// Superior directory
var to = cookies.slice(tolen+4, cookies.length);
window.document.cookie=`user=${
user},password=${
password}`
exito(to)
}
}
// Jump judgment
function exito(x){
console.log(x)
if(x=="index"){
location.href="./index.html"
}else if(x=="user"){
location.href="./user.html"
}else if(x==1){
location.href="./index.html"
}
}
</script>
</body>
</html>
establish userimg.js Then write the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1> Chat </h1>
<span id="innerdoc"></span>
<button onclick="exit()"> return </button>
<button onclick="ers()"> Parsing parameters </button>
<script>
function ers() {
var cookies = window.document.cookie;
if (cookies.indexOf(",to=") == -1) {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, cookies.length);
console.log(user, password);
} else {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
const fidlen = cookies.indexOf(",fid=");
// obtain fid
const tolen = cookies.indexOf(",to=");
// Get the superior Directory
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, fidlen);
// fid
var fid = cookies.slice(fidlen + 5, tolen);
// Superior directory
var to = cookies.slice(tolen + 4, cookies.length);
var innerdoc=document.getElementById('innerdoc')
innerdoc.innerHTML=` Current directory ：${
to}>user.html`
console.log(user, password, fid, to);
}
}
// Judgment return
function exit() {
var cookies = window.document.cookie;
if (cookies.indexOf(",to=") == -1) {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, cookies.length);
console.log(user, password);
window.document.cookie = `user=${
user},password=${
password}`;
exito(1);
} else {
const nalen = cookies.indexOf("user=") + 4;
// Get password location
const pwdlen = cookies.indexOf(",password=");
// To obtain the length of the
const fidlen = cookies.indexOf(",fid=");
// obtain fid
const tolen = cookies.indexOf(",to=");
// Get the superior Directory
var user = cookies.slice(nalen + 1, pwdlen);
// Get password
var password = cookies.slice(pwdlen + 10, fidlen);
// fid
var fid = cookies.slice(fidlen + 5, tolen);
// Superior directory
var to = cookies.slice(tolen + 4, cookies.length);
window.document.cookie = `user=${
user},password=${
password}`;
exito(to);
}
}
// Jump judgment
function exito(x) {
console.log(x);
if (x == "index") {
location.href = "./index.html";
} else if (x == "user") {
location.href = "./user.html";
} else if (x == 1) {
location.href = "./index.html";
}
}
</script>
</body>
</html>
Make sure you are in the same directory and then vscode Next LiveServer Or use express Static hosting can also
Add extensions ：express course
without LiveServer Please download this plug-in in the extension list
Then our browser will open
test
1, When you click 【 Chat 】 Then we entered the chat page , Above us is index.html page
After parsing, it is 
2, When clicking in turn 【 user 】>【 Chat 】 Then we entered the chat page , Our last page was user.html
After parsing, it is 
When we click back, we will go to the previous page （【 user 】）
The latter
So we realized the function
I think it's OK to write three times with one key
If you have any questions, please leave a message in the comment area
边栏推荐
- MySQL index filesort
- [internationalization] decimal point and comma of application development
- Cososcreator upgrade gradle version
- Error lnk2019: unresolved external symbol [email protected]
- Protocol buffer learning notes
- Wargames NATAS (0-10) problem solving essay
- Read and understand move2earn project - move
- Alibaba cloud OSS uploads pictures under folders and encounters pits
- Use the bark app to realize the process of pushing messages to mobile phones
- 【MySQL】08：聚合函数
猜你喜欢
【一起上水硕系列】EE feedback 详解
Wargames NATAS (11-15) problem solving essay
How difficult is it to build a digital collection platform?
SVG 从入门到后悔，怎么不早点学起来（图解版）
【MySQL】08：聚合函数
1、 Midwey addition, deletion, modification and query
Draw a circular radar chart with canvas
Hack the box - File Inclusion module detailed Chinese tutorial
From starfish OS' continued deflationary consumption of SFO, the value of SFO in the long run
Route interceptor
随机推荐
Group by group and get the first data
Private traffic + apps, new opportunities for e-commerce drainage
Wechat applet subscription message development process
Move protocol global health declaration, step into Web3 in sports
Go: how to gracefully time out
JMX Console 未授权访问漏洞
Read and understand move2earn project - move
JS to get the default language of the current browser
G1 (garbage first) collector
What is the difference between domestic "rocket heart" artificial heart and different artificial heart?
About the big hole of wechat applet promise
Grpc learning notes
Wxml template concise tutorial
Alibaba cloud OSS uploads pictures under folders and encounters pits
Go: Gin basicauth Middleware
Error lnk2019: unresolved external symbol [email protected]
MySQL counts the total sales data of each month
Vscode code style notes (vetur)
「题解」带分数
"Explanation" change exchange