请列举 html5 本地存储（ localStorage ）

[问答题]

请列举 html5 本地存储（ localStorage ）相关 api ，并实现 getAll 方法，获取本地存储

油炸热咖啡 wayne

localStorage API主要有这几个操作：

设置数据：localStorage.setItem(key,value)

获取数据：localStorage.getItem(key,value)

删除数据：localStorage.removeItem(key)

清空所有数据：localStorage.clear()

获取本地存储数据数量：localStorage.length

获取第N个数据的key键值

localStorage.getAll = function() {

var obj = [];

for(var i = 0;i < localStorage.length;i++) {

obj.push(localStorage.key(i));

}

return obj;

}

发表于 2017-08-03 15:05:30 回复(0)

小白同学

setItem(key,value) 添加数据

getItem(key) 根据key获取值

key(index) 根据索引获取key

removeItem(key) 根据key删除一条数据

clear() 清空数据

length:获取总数据的长度

getAll()这个方法我没太明白想获取什么，所以我采用了key()和getItem()方法结合获取键值对

function() {
    for (let i = 0; i < localStorage.length; i++) {
        let key = localStorage.key(i)
        let value = localStorage.getItem(key)
        console.log(key + ":" + value)
    }
}

编辑于 2017-08-04 15:24:54 回复(0)

最懂浪漫的程序猿

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            display: flex;
            width: 90%;
            justify-content: center;
        }
        li {
            flex: 1;
            border: 1px solid #ccc;
            height: 50px;
            text-align: center;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>

</html>

发表于 2023-08-27 15:53:36 回复(0)