Example of LocalStorage local storage in html5

1. Local Storage

Before the birth of HTML5, if a website wanted to store data on the browser side, it could only use Cookie, and there were many uses of Cookies. limits.

　Cookie problem: Unnecessary cookies will also be sent together)

Local storage:

1. The size of localStorage is limited to 5M (different browsers are inconsistent)

2. LocalStorage will not follow HTTP requests are sent together

2. Session-level local storage-

session

Storage SessionStorage: The user browses a certain When using a website, from the time you enter the website until you close the website, this is the validity period of the session object. sessionStorage provides four methods to perform related operations on local storage.

　1.

setItem(key, value)

；Add local storage data

　2.getItem(key);Get the corresponding value through key Value

　3.removeItem(key); Delete

corresponding value through key

　4.clear() ;Clear all local (limited to this domain name) session data

 1 <script type="text/javascript"> 
 2     //添加key-value 数据到 sessionStorage 
 3     sessionStorage.setItem("name", "怜白"); 
 4     sessionStorage.setItem("job", "前端"); 
 5  
 6     //通过key来获取value 
 7     var name = sessionStorage.getItem("name"); 
 8  
 9     console.log(name); // 怜白
 10     console.log(sessionStorage.length); // 2
 11 
 12     // 通过key删除value
 13     sessionStorage.removeItem("job");
 14 
 15     console.log(sessionStorage.length); // 1
 16 
 17     //清空所有的key-value数据。
 18     sessionStorage.clear();
 19 
 20     console.log(sessionStorage.length); // 0
 21 </script>

3. Permanent local storage-localStorage

localStorage: used for persistence Local storage, unless the data is actively deleted, the data will never expire. LocalStorage provides four methods to perform related operations on local storage.

　1.

setItem(key, value)

；Add local storage data

　2.getItem(key);Get the corresponding value through key Value

　3.removeItem(key); Delete the corresponding value value through key

　4.clear(); Clear all local data

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    localStorage.setItem("name", "怜白");
    localStorage.setItem("job", "前端");

    //通过key来获取value
    var name = localStorage.getItem("name");

    console.log(name); // 怜白
    console.log(localStorage.length); // 2

    // 通过key删除value
    localStorage.removeItem("job");

    console.log(localStorage.length); // 1

    //清空所有的key-value数据。
    localStorage.clear();

    console.log(localStorage.length); // 0
</script>

4. Summary　

The difference between localStorage and sessionStorage is that one is temporary storage and the other is long-term storage. You may have seen the following writing:

<script type="text/javascript">
    // 设置name
    localStorage.name = "怜白"

    // 删除name
    delete localStorage.name
</script>

The above direct assignment method can indeed achieve the function, but it is defined in the official document as an un

safety

way of writing, so don’t use this way of writing, use the method provided by localStorage.

The above is the detailed content of Example of LocalStorage local storage in html5. For more information, please follow other related articles on the PHP Chinese website!