Detailed explanation of the use of localStorage in Html5-JS Tutorial-php.cn

Detailed explanation of the use of localStorage in Html5

php中世界最好的语言

Release： 2018-03-16 17:02:41

Original

1848 people have browsed it

This time I will bring you a detailed explanation of the use of localStorage in Html5. What are the precautions for using localStorage in Html5?The following is a practical case, let's take a look.

localStorage is a newly added feature of Html5. This feature is mainly used for browser local storage

1. Determine whether the browser supports localStorage

  if (!window.localStorage) {        console.log("浏览器不支持localStorage")
    } else {        console.log("浏览器支持localStorage")
    }

Copy after login

2. Go to localStorage Write content:

  var DemoStorage = window.localStorage;    //写入方法1：
    DemoStorage.name = "Tom";    //写入方法2：
    DemoStorage["age"] = 18;    //写入方法3：
    DemoStorage.setItem("hobby", "sport");    
    console.log(DemoStorage.name,typeof DemoStorage.name);    console.log(DemoStorage.age, typeof DemoStorage.age);    console.log(DemoStorage.hobby, typeof DemoStorage.hobby);    /*输出结果:
    Tom string
    18 string
    sport string*/

Copy after login

In the above code example: age input is a number, but the output is a string. It can be seen that localStorage can only store string type data.

Delete of localStorage:

1. Delete all contents in localStorage:

Storage.clear() does not accept parameters, just simple Clear the entire storage

object corresponding to the domain name.

 var DemoStorage = window.localStorage;    
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    
    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.clear();    console.log(DemoStorage);    //输出: Storage {length: 0}

Copy after login

2. Delete a key-value pair:

Storage.removeItem() accepts a parameter - the key of the data item you want to remove, and then the corresponding data item will be Removed from the storage object corresponding to the domain name.

   var DemoStorage = window.localStorage;
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.removeItem("age");    console.log(DemoStorage);    //输出：Storage {hobby: "sport", name: "Tom", length: 2}

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!