Web storage-webstorage

Web storage-webstorage

• Web Storage Classification
  
  • Client and server
• Understanding web Storage
  • With the development of web applications, client-side storage is used more and more. However, client-side storage methods are becoming more and more diversified. The simplest and most compatible method is cookie, but as a real client to store cookies, there are still many drawbacks. At the same time, various browsers also have their own storage methods. For example, userData Behavior can be used in IE6 and later versions, globalStorage can be used in Firefox, and Flash Local Storage can be used in Flash plug-ins, however, these methods have drawbacks such as compatibility, which is not the best method for client storage.
  • Due to the above situation, several new storage methods are added in html5. Web Database and web Storage.
• Differences Between Different Storage Methods
  • Cookie advantages and disadvantages
    • Cookie Operating Principle
      • As a client storage method, cookies mainly use text storage. When an application uses cookies, the server sends the cookies to the client and saves them. The cookie stored on the client is sent to the server for the next access. In development, the most typical case is to store user information.
    • Advantages
      • Simple and Convenient
      • The browser is responsible for sending data
      • The browser manages the data of different sites by itself, so it is not prone to data disorder.
    • Disadvantages
      • As mentioned above, we use the communication between the server and the client and the server. This results in unnecessary bandwidth consumption and page loading speed, which leads to poor user experience.
      • The size of stored data is limited. Cookies can only store 4 kb of data.
      • Security. Cookie data is stored on the client in the form of text, which is very low in security and can easily cause data theft.
      • Quantity limit. Most browsers can store 30-50 cookies, and some browsers support 300, while IE6 only supports 20.
      • Data Integrity. When our client is set to the highest security level, our cookie will become invalid.
  • Advantages and disadvantages of web storage
    • Webstorage
      • This is a new method for storing data on clients added to html5. It provides easy-to-operate APIs, and you only need to set the key value. The data size stored under each user domain is 5-10 M. Includes sessionStorage and localStorage. It also includes web databases.
    • Advantages
      • The stored data is larger.
      • The stored data is stored on the client and does not need to communicate with the browser. This reduces our bandwidth consumption.
      • It provides rich and easy-to-use APIs, making development easier for developers.
      • Use an independent bucket. Each domain has an independent storage space, and each space is completely independent, which can avoid data disorder (this is actually not much different from cookie ).
    • Disadvantages
      • Because the data stored under each domain is independent space, we cannot use data under other domains in one domain.
      • Because data is not actively deleted, the stored data is always stored and not encrypted, which can easily cause data theft.
    • LocalStorage
      • LocalStorage is a storage method without time restrictions. data will not be lost unless we actively clear data.
    • SessionStorage
      • SessionStorage is a session-based storage method. When we close the session in a browser or operation window, the data stored by sessionStorage will be lost. It can only be used on the same session page.
    • Browser support
      • IE8.0 or above, Firefox3.0 or above, opera10.5 or above, chrome3.0 or above, and safari4.0 or above.
        　　
• Instance code
  • Checks whether the current browser supports

  • <Script type = "text/javascript"> // verify whether the current browser supports localStorage and sessionStorage windows. onload = function () {if (window. localStorage & window. sessionStorage) {alert ("your browser supports localStorage and sessionStorage") ;}</script>

     

    　
  • Basic usage
    • Note: Both localStorage and sessionStorage store string objects.
    • Create

      • <Script type = "text/javascript"> // localStorage is used for example creation. The sessionStorage syntax is the same as localStorage: localStorage (key, value); or localStorage. key = "value"; window. onload = function () {if (window. localStorage) {localStorage. setItem ("userName", "zhangsan") ;}</script>

         

        　　　　
    • Get Storage

      • • <Script type = "text/javascript"> // you can directly use localStorage. getItem (key); you can also use localStorage. key; window. onload = function () {if (window. localStorage & window. sessionStorage) {localStorage. setItem ("userName", "Michael"); alert (localStorage. getItem ("userName "));
          }}</Script>

           

          　　
    • Delete Storage

      • • <Script type = "text/javascript"> // localStorage. removeItem (key): deletes the specified storage according to the key name, localStorage. clear (): delete all specified Storage. It is executable when the Storage object is empty. Window. onload = function () {if (window. localStorage & window. sessionStorage) {localStorage. setItem ("userName", "hello, world! ");
          LocalStorage. removeItem ("userName ");
          LocalStorage. clear () ;}</script>