当前位置：网站首页>2021 Kent interview question 2

2021 Kent interview question 2

2022-07-28 15:55:00 【PBitW】

List of articles

The mechanism of event bubbling
- Pass the parameters of the process
cookies sessionStorage localStorage

The mechanism of event bubbling

The rookie answered ：

The event bubble mechanism is after the event is clicked , The event will be passed up by the clicked element , for example ：div There are span, Then click span The event of will also be passed to click div The above to .

HR Say I answered a little question ,HR what did you say? IE The bubbling mechanism of is from top to bottom , In fact, he is wrong .

Here may be HR Confuse the capture of events with bubbling .
Insert picture description here
See the 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>
  <style> .wrapper,.wrapper1,.wrapper2{
       width: 500px; height: 500px; background-color: aqua; display: table-cell; vertical-align: middle; } .content,.content1,.content2{
       width: 100px; height: 100px; background-color: red; margin: auto; } .span1,.span11,.span12{
       display: inline-block; width: 30px; height: 30px; background-color: green; } </style>
</head>
<body>
  <div class="wrapper">
    <div class="content">
      <span class="span1"></span>
    </div>
  </div>
  <div class="wrapper1">
    <div class="content1">
      <span class="span11"></span>
    </div>
  </div>
  <div class="wrapper2" onclick="fun1()">
    <div class="content2" onclick="fun2()">
      <span class="span12" onclick="fun3()"></span>
    </div>
  </div>
</body>
<script> document.querySelector(".wrapper").addEventListener("click",function(){
       alert(" The outermost div Clicked "); }); document.querySelector(".content").addEventListener("click",function(){
       alert(" Second floor div Clicked "); }); document.querySelector(".span1").addEventListener("click",function(){
       alert(" Innermost span Clicked "); }); document.querySelector(".wrapper1").addEventListener("click",function(){
       alert(" The outermost div Clicked "); },true); document.querySelector(".content1").addEventListener("click",function(){
       alert(" Second floor div Clicked "); },true); document.querySelector(".span11").addEventListener("click",function(){
       alert(" Innermost span Clicked "); },true); function fun1(){
       alert(" The outermost div Clicked "); } function fun2(){
       alert(" Second floor div Clicked "); } function fun3(){
       alert(" Innermost span Clicked "); } </script>
</html>

Pass the parameters of the process

Insert picture description here

cookies sessionStorage localStorage

The answer of the rookie here is ：
I've blogged about these three before , I don't remember much now , Only one thing I know is that the current interface is valid , One is to save locally , then cookie Is to transfer values to the server , Can be requested on the network header Set in cookie

Basic concepts

Cookie MDN

Cookie

Cookie It means cookie , seeing the name of a thing one thinks of its function ,cookie exactly A very small , Its size is limited to 4KB about . Its main purpose is to save login information , such as ： You can see “ Remember the password ”, This is usually done through Cookie To store a piece of data to identify the user's identity .

cookie What is it? ?

Actually cookie It is stored on your computer's hard disk by a network server txt Small files of type , It's about your web browsing behavior , So what's stored on your computer cookies It's like one of your ID cards , On your computer cookie And other computers cookie It's different ;cookie Cannot be considered code execution , Can't be a virus , So it's basically harmless to you .

cookie What is the role ？

cookie Its main function is , When you visit some web pages , And modify some settings of the web page ,cookie You can track and record these changes , The next time you visit this page , This page will analyze your computer cookie, Then take measures like returning to your personalized web page ; Of course , At present, the positioning basis of most advertisements is also based on cookie Of , such as ： You have visited a lot of fitness websites before ,cookie Record your visit behavior , The advertiser will be able to follow your visiting behavior , Push fitness advertisements to you .

localStorage

localStorage yes HTML5 New technology added to the standard , It's not an epoch-making new thing . As early as IE 6 Time , There's one called userData For local storage , And then, considering browser compatibility , A more general solution is to use Flash. Today, ,localStorage Supported by most browsers , If your website needs support IE6+, Then the userData As your polyfill（ The front end of the article is clear polyfill） It's a good choice .

sessionStorage

sessionStorage And localStorage Similar interface , But the life cycle of saving data is the same as localStorage Different .sessionStorage It's a front-end concept , It just can Save some data in the current session , Refresh page data still exists . But when the page closes ,sessionStorage The data in will be cleared .

here sessionStorage localStorage You can read rookie's blog ：
Learn the front end again HTML5 Web Storage （ cache ）/HTML5 Web SQL database /HTML5 Application caching （ Eighth days ）

Security

It should be noted that , Not all data is suitable for Cookie、localStorage and sessionStorage Medium . When using them , You need to always pay attention to whether there is code XSS The risk of Injection . Because just open the console , You can change their values at will , That is to say, if your website has XSS The risk of , They can do something to your localStorage profligacy . So don't use them to store sensitive data in your system .

here HR Wrong again , What did he say? localStorage Will encrypt , Others will not be encrypted , A face of meng , I was serious ！

similarities and differences

Insert picture description here
cookie Data is always in the same source http Carry... In the request （ Even if you don't need ）, Will be passed back and forth between the browser and the server .

sessionStorage and localStorage It doesn't automatically send data to the server , Save locally only .

sessionStorage and localStorage Although there are also storage size limitations , But more than cookie Much more , You can achieve 5M Or bigger .

session

Now that I've talked about it cookie, Just put session I also talked about

cookie and session The difference between

The range of action is different ,Cookie Save on client （ browser ）,Session Save on the server side （ Save session information ） --> Session Make up for HTTP Stateless characteristic , Servers can take advantage of Session Store some operation records of the client during the same session .
Different access methods ,Cookie Save only ASCII,Session Can store any data type , In general, we can Session Keep some common variable information in , for instance UserId etc. .
Different expiry dates ,Cookie Can be set to hold for a long time , For example, we often use the default login function ,Session Short general failure time , Client shutdown or Session Timeout will fail .
Different privacy policies ,Cookie Store on client , More vulnerable to illegal acquisition , In the early days, someone stored the user's login name and password in Cookie Cause information to be stolen ;Session Store on the server , Relative safety Cookie Better .
Different storage sizes , Single Cookie The saved data cannot exceed 4K,Session Storable data is much higher than Cookie.

sessionID( bridge )

When the user first requests the server , The server submits relevant information according to the user , Create corresponding Session , When the request returns, it will this Session Unique identification information for SessionID Back to the browser , And through the Set-Cookie：JSESSIONID=XXXXXXX command , Send request settings to client Cookie Response , The browser receives the SessionID After the message , This information will be saved to Cookie in , meanwhile Cookie Record this SessionID Which domain name does it belong to .

When the user accesses the server for the second time , The request will automatically determine whether the domain name exists Cookie Information , If there is an automatic Cookie Information is also sent to the server （ Sometimes you need to set it yourself ）, The server will Cookie In order to get SessionID, According to SessionID Find the corresponding Session Information , If not found, the user is not logged in or the login fails , If you find Session Prove that the user has logged in to perform the following operations .

Be careful ：

Wechat applet will not automatically send http Add... To the request header cookie, So every time the server is requested, it will reconnect with it , So you have to set it yourself cookie. Specific view ：
Wechat applet project meets problem 3 ： occasionally undefined It doesn't have to be undefined | Solve wechat applet every time request request ,Cookie Dissimilarity | request Cannot get return value

thank ：
Do you really understand Cookie and Session Do you ?
Session、Cookie、Token 【 Talk about the thing between the three 】

原网站

版权声明
本文为[PBitW]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/209/202207281451251390.html