search

Home >Web Front-end >JS Tutorial >A brief discussion on local storage of localStorage

A brief discussion on local storage of localStorage

零下一度
零下一度Original
2017-06-24 14:38:493170browse

When we use local storage when making pages, today we will talk about localStorage local storage.

1. localStorage.name="Lao Wang"; //The first method to set up local data storage localStorage

2. localStorage.setItem("color","red "); //The second method of setting up local data storage

3, localStorage.removeItem("name"); //Delete local storage data

4, localStorage.name // Get local data
localStorage.getItem("set") //Another way to get local data

5 localStorage.key(0) //Get the sum of the values ​​in the brackets of the name of the previously saved data The arrays are the same

6, localStorage.clear() //Clear all locally stored data

7, localStorage.setItem("set1","{'name':'Xiao Li', 'age':'1314'}") //Save in json format, 1. Save the number of items 2. Easy to extract

8. var price=localStorage.getItem("set1") // Get the saved Local data
obj=eval('('+price+')') //Convert json format string to object
alert(obj.age) //Call the value

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    localStorage.name="杜人龙";
    localStorage.name="小花"; //第一种设置本地数据的方法
    localStorage.setItem("set","小菊"); //第二种设置本地数据的方法
    localStorage.setItem("set1","{&#39;name&#39;:&#39;小李&#39;,&#39;age&#39;:&#39;1314&#39;}") //保存为json格式
    localStorage.removeItem("name"); //删除本地存储数据
    alert(localStorage.name) //获取本地数据
    alert(localStorage.getItem("set"))  //另一种获取本地数据的方法

    alert(localStorage.key(0)) //获取前面保存数据的名称 括号中的数值和数组相同

    var price=localStorage.getItem("set1")
    obj=eval(&#39;(&#39;+price+&#39;)&#39;)
    alert(obj.age)
    localStorage.clear()  //清楚本地所有数据


</script>
</body>
</html>

Storage location

The above is the detailed content of A brief discussion on local storage of localStorage. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example tutorial on separation of front-end and back-endNext article：Example tutorial on separation of front-end and back-end

Related articles

See more