当前位置：网站首页>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
边栏推荐
- Summary of points management system project
- Wechat applet subscription message development process
- Cososcreator upgrade gradle version
- Beandefinition three ways to load beans
- The beta version of move protocol is stable, and it is temporarily decided to expand the scale of the prize pool
- Oauth2 server set up oauth2 authentication service
- "Problem solution" with score
- [wechat applet development (IV)] applet fast actual combat classic problem navigation
- Cmake binary installation
- How difficult is it to build a digital collection platform?
猜你喜欢
Precautions for using kettle excel input
Vscode code style notes (vetur)
![[MySQL] 08: aggregate function](/img/a3/f58fa50f1f7cf5810a9f00d891cfae.png)
[MySQL] 08: aggregate function
Crypto giants all in metauniverse, and platofarm may break through
Is yuancosmos hype? Or the future
Why does the metauniverse need NFT?
Digital collection =nft? Have you entered the digital collection?
安装软件时提示【An error occurred while trying to create a file in the destination directory: 拒绝访问】的解决方法
JMX console unauthorized access vulnerability
Figure storage geabase
随机推荐
What is the difference between domestic "rocket heart" artificial heart and different artificial heart?
Web3≠NFT？ A digital Renaissance?
【JDBC】JDBC经典面试题，持续更新中......
Stack / heap / queue question brushing (Part 2)
Alibaba cloud OSS uploads pictures under folders and encounters pits
Wechat payment V3 version of openresty implementation and pit avoidance Guide (service side)
MySQL date formatting
Cmake binary installation
"Problem solving" Batman's trouble
Wechat applet subscription message development process
4、 Midway integrates swagger and supports JWT bearers
SQL learning
3、 Midway interface security certification
阻塞队列BlockingQueue 源码解析（ArrayBQ和LinkedBQ）
Cososcreator upgrade gradle version
Limited and unlimited Games: crypto
Grpc learning notes
MySQL counts the total sales data of each month
2022.7.11全盘题解
Install SQL Server database