Use JS to switch the corresponding CSS style sheet. For example, in the upper-right corner of the hao123 homepage, the webpage skin replacement function is available. In addition to switching the CSS style sheet file, the usual webpage skin replacement also requires the use of cookies to record the user's previous skin, so that the next time the user visits, it will... syntaxHighlighter. all (); Use JS to switch the corresponding CSS style sheet. For example, in the upper-right corner of the hao123 homepage, the webpage skin replacement function is available. In addition to switching the CSS style sheet file, the usual webpage skin replacement also needs to use cookies to record the user's previous skin, so that the next time the user visits, the options configured by the last user can be automatically used. The basic process is as follows: the flowchart is used to describe the process chart, which is very small since work. If the flowchart is incorrect or it is not good enough, please forgive me! Let's take a look! I just made a demo to achieve this effect! If there are four buttons representing different styles when the page comes in, when I click different buttons, switch different css files and record the cookie when switching, when we refresh the page or close the web page and re-open the css style before it is disabled because of the existence of the cookie, the basic principle of the simple Web page skin replacement function is achieved! Learn about cookies and sessionStorage and localStorage in HTML5. First, let's take a look at how cookies are used? To put it simply, cookies are used by clients to store data. That is, local storage. For more information, see my previous blog on cookie. For more information about cookies, let's take a look at the two newly added local storage sessionStorage and localStorage in HTML5. sessionStorage, localStorage, and cookie are all data stored on the browser. The concept of sessionStorage is very special and introduces the concept of "browser window. SessionStorage is the data that always exists in the same window (or tab) of the same source. That is to say, as long as the browser window is not closed, even if the page is refreshed or another page is accessed from the same source, the data still exists. When the window is closed, sessionStorage is destroyed. At the same time, the sessionStorage objects are different for different windows opened separately, even on the same page. Benefits of Web Storage: reduces network traffic: once the data is stored locally, you can avoid sending data requests to the server, thus reducing unnecessary data requests, reduces the amount of data transmitted between the browser and the server. Quick data display: the performance is good. Reading data locally is much faster than obtaining data from the server over the network, and local data can be obtained instantly. In addition, the webpage itself can also be cached. Therefore, if the entire page and data are both local, they can be immediately displayed. Temporary Storage: in many cases, data is only used when users browse a group of pages. When the window is closed, the data can be discarded. In this case, sessionStorage is very convenient. What are the similarities and differences between cookie sessionStorage and localStorage? In common: all data is stored on the browser, and is the same as the source data. Differences: 1. Different Storage sizes: the maximum number of data stored in cookies is 4 kb. sessionStorage and localStorage can store 5 MB or more data. 2. cookie data is always carried in the same source http request, that is, the cookie is transmitted back and forth between the browser and the server. SessionStorage and localStorage do not automatically send data to the server and only save the data locally. 3. different data validity periods: sessionStorage: Valid only before the current browser window is closed. It is naturally impossible to maintain persistence; localStorage: always valid, windows or browsers are closed and saved all the time, so it is used as persistent data; the cookie is valid only until the specified cookie expires, even if the window or browser is closed. 4. with different scopes, sessionStorage is not shared in different browser windows, even on the same page. localStorage is shared in all same-source windows, and cookies are shared in all same-source windows. What problems do I encounter when using cookies? First, let's talk about my local demo. Because I didn't put it under any server, I directly clicked the page on the desktop and suddenly found that "Google browser does not support cookie local storage ". To solve this problem, no cookie storage is used in Google explorer. Instead, localStorage in HTML5 is used as the local storage function. Set the key name through setItem and then get the key name through getItem to get the value. The HTML code is as follows:
Frontend development is one of my career goals. I like frontend development, frontend development, and various page effects.
CSS code default.css code: @ charset "UTF-8";/* CSS Document */* {padding: 0; margin: 0;} h2 {color: # 00C ;} p {color: 000000600000000orange.css code: @ charset "UTF-8";/* CSS Document */* {padding: 0; margin: 0;} h2 {color: #60 ;} p {color: #C33;}green.css code: @ charset "UTF-8";/* CSS Document */* {padding: 0; margin: 0;} h2 {color: #060 ;} p {color: #0601_red.css code: @ charset "UTF-8";/* CSS Document */* {padding: 0; margin: 0;} h2 {color: # F00 ;} p {color: # F00 ;}
