当前位置：网站首页>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
边栏推荐
- Use the bark app to realize the process of pushing messages to mobile phones
- JMX console unauthorized access vulnerability
- Dao race track is booming. What are the advantages of m-dao?
- [wechat applet development (II)] custom navigation bar
- Shared lock, exclusive lock, mutex lock, pessimistic lock, optimistic lock, row lock, table lock, page lock, non repeatable read, lost modification, read dirty data
- Classic problems of binary tree
- 1、 Midwey addition, deletion, modification and query
- 【JDBC】JDBC经典面试题，持续更新中......
- Oauth2 server set up oauth2 authentication service
- Assembly | screen display numbers
猜你喜欢
Route interceptor
安装软件时提示【An error occurred while trying to create a file in the destination directory: 拒绝访问】的解决方法
Musk responded that the brain has been uploaded to the cloud: already did it!
You can't access this shared folder because your organization's security policies prevent unauthenticated guests from accessing it. These policies can help protect your computer from unsafe or malicio
1、 Midwey addition, deletion, modification and query
![[wechat applet development (III)] realize the stacking and sliding of cards](/img/6c/4ebd60a2106b56b8bf3a6bf17d11f9.png)
[wechat applet development (III)] realize the stacking and sliding of cards
【一起上水硕系列】一起提前看看July课程
![[Game Collection] mobile phones are about to burst, and a collection of six high-quality pyGame games is coming ~ (source code attached)](/img/9e/b237bfa891bd2beb9c1b8a612e9090.png)
[Game Collection] mobile phones are about to burst, and a collection of six high-quality pyGame games is coming ~ (source code attached)
Wargames NATAS (0-10) problem solving essay
2022.7.11 overall solution
随机推荐
Wechat applet host environment, applet architecture, concise operation structure
Local warehouse associated with remote warehouse
Brief notes on the key points of distributed system principle introduction
WordPress free theme: document, making reading more convenient
Typora提示【This beta version of Typora is expired, please download and install a newer version】的解决方案
Limited and unlimited Games: crypto
Typescript -- Generic
Is gamefi in decline or in the future?
Optimization of MySQL paging query
[wechat applet development (II)] custom navigation bar
Recursive performance test
table-rowspan
Go:gin write test code
5、 Use of environment variables in midway
Wxml template concise tutorial
Database | simple hospital patient appointment system based on opengauss
Alibaba cloud deploys SSL certificates
Wargames NATAS (0-10) problem solving essay
T-SQL query statement
Confusing defer, return, named return value, anonymous return value in golang