Web storage--detailed introduction to webstorage

• Web storage classification
  

• Client and server

• Understanding web storage

• #With the development of web applications, there are more and more uses for client-side storage, but the ways to implement client-side storage are also becoming more and more diverse. change. The simplest and most compatible way is cookies, but there are still many disadvantages to storing cookies as a real client. At the same time, various browsers also have their own storage methods. For example, userData Behavior can be used in IE6 and above, globalStorage can be used in Firefox, and Flash Local Storage can also be used in Flash plug-ins. However, these methods have disadvantages in compatibility and other aspects, and client-side storage does not belong to the best way.

• Due to the above situation, several new storage methods have been added to html5. web Database and web Storage.

• The difference between various storage methods

• Understanding webstorage

• Advantages

• Disadvantages

• localStorage

• sessionStorage　

• Browser support

• This is a new way for the client to store data in HTML5. It provides an easy-to-operate API and only needs to set the key value. The size of data stored under each user domain is 5M-10M. Contains sessionStorage and localStorage below. At the same time, it also includes web Database.

• The stored data size is larger.

• The stored data is saved on the client side and does not need to communicate with the browser, which can reduce our bandwidth consumption.

• Provides a rich and easy-to-use API, making it easier for developers to develop.

• Use independent storage space. There is an independent storage space under each domain, and each space is completely independent, which can avoid data confusion (this is actually not much different from cookies).​

• Since the data stored in each domain is an independent space, we cannot use data in other domains under one domain.

• Because the stored data is always saved without our active deletion and the data is not encrypted, it is easy to cause data theft.

• localStorage is a storage method with no time limit. Unless we actively clear the data ourselves, the data will not be lost.

• sessionStorage is a storage method for sessions. When our browser or operation window is closed, the data stored in sessionStorage will be lost. It can only be used on pages in the same session at the same time.

• IE8.0 or above, Firefox3.0 or above, Opera10.5 or above, Chrome3.0 or above, Safari4.0 or above.
  

• How cookies work

• Advantages

• Disadvantages

• As a client-side storage method, cookies mainly use text storage. When an application uses cookies, the server will send the cookie to the client, and the client will save it. When the user visits next time, the cookie stored on the client will be sent to the server. In development, the most typical case is to store user information.

• Simple and convenient

• The browser is responsible for sending data

• The browser manages different sites by itself Data is not prone to data confusion.

• As mentioned above, the working principle of cookies is that we communicate from server to client and client to server. This causes unnecessary bandwidth consumption, and also affects the loading speed of the page, resulting in poor user experience.

• Stored data size limit, cookie can only store 4kb of data.

• safety. Cookie data is stored on the client in the form of text, which has very low security and can easily cause data to be stolen.

• Quantitative restrictions. The number of cookies that most browsers can store is 30-50, and some browsers support 300, while IE6 only supports 20.

• Data integrity. When our client is set to the highest security level, our cookies will expire.

• Advantages and disadvantages of cookies

• Advantages and disadvantages of web storage

• Example code

• Note: localStorage and sessionStorage store both string objects.

• Create

• Get Storage

• Delete Storage

• <script type="text/javascript">// 创建均使用localStorage做示例，sessionStorage语法方式和localStorage是一样的，localStorage(key, value);或者localStorage.key = "value";window.onload = function(){if (window.localStorage) {
                  localStorage.setItem("userName", "张三");}
          }</script>

  　　

• <script type="text/javascript">window.onload =  (window.localStorage &&"userName", "张三""userName"</script>

  　

• 
  

• <script type="text/javascript">window.onload =  (window.localStorage &&"userName", "hello,world!"</script>

  　　　

• 
  

• Detect whether the current browser supports

•     <script type="text/javascript">// 验证当前的浏览器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的浏览器支持localStorage和sessionStorage");
              }
          }</script>

The above is the detailed content of Web storage--detailed introduction to webstorage. For more information, please follow other related articles on the PHP Chinese website!