storage

西瓜皮儿 2021/12/23

# 对比

localStorage和sessionStorage

特性	localStorage	sessionStorage
有效时长	永久	当前浏览器会话关闭即消失
存储类型	String	String
访问限制	同源策略	同源策略

# setItem

setItem

作用：设置storage键值对
调用：localStorage.setItem(key, value)
入参：String, String
返回：undefined

<body>
    <div>首页</div>

    <script>
        const userId = '123456';
        const userName = 'hdy';
        sessionStorage.setItem('userId', userId);
        sessionStorage.setItem('userName', userName);

        console.log(sessionStorage.length); // 2
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12

# getItem

getItem

作用：拿到某一项的值，没有返回null
调用：localStorage.getItem(key)
入参：String
返回：String | null

<body>
    <div>首页</div>

    <script>
        const userId = '123456';
        const userName = 'hdy';
        sessionStorage.setItem('userId', userId);
        sessionStorage.setItem('userName', userName);

        console.log(sessionStorage.getItem('userName')); // hdy
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12

# length

length

作用：存储在当前的storage对象中的键值对数量
值：Number

<body>
    <div>首页</div>

    <script>
        const userId = '123456';
        const userName = 'hdy';
        sessionStorage.setItem('userId', userId);
        sessionStorage.setItem('userName', userName);

        console.log(sessionStorage.length); // 2
        sessionStorage.removeItem('userName');
        console.log(sessionStorage.length); // 1
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# key

key

作用：拿到某个索引的键
调用：localStorage.key(num)
入参：Number
返回：String

<body>
    <div>首页</div>

    <script>
        const userId = '123456';
        const userName = 'hdy';
        sessionStorage.setItem('userId', userId);
        sessionStorage.setItem('userName', userName);
        console.log(sessionStorage.key(1)); // userName
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11

# removeItem

removeItem

作用：移除某一个键值对
调用：localStorage.removeItem(key)
入参：String
返回：String | null

<body>
    <div>首页</div>

    <script>
        const userName = 'hdy';
        sessionStorage.setItem('userName', userName);

        console.log(sessionStorage.getItem('userName')); // hdy
        sessionStorage.removeItem('userName');
        console.log(sessionStorage.getItem('userName')); // null
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12

# clear

clear

作用：清空storage
调用：localStorage.clear()
返回：undefined

<body>
    <div>首页</div>

    <script>
        const userId = '123456';
        const userName = 'hdy';
        sessionStorage.setItem('userId', userId);
        sessionStorage.setItem('userName', userName);

        console.log(sessionStorage.length); // 2
        sessionStorage.clear();
        console.log(sessionStorage.length); // 0
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 遍历

遍历storage

思路：利用length拿下标，key用下标拿键名，getItem拿值

<body>
    <div>首页</div>

    <script>
        const userId = '123456';
        const userName = 'hdy';
        sessionStorage.setItem('userId', userId);
        sessionStorage.setItem('userName', userName);

        function getAllSessionStorage() {
            const len = sessionStorage.length;
            const ans = [];
            for (let i = 0; i < len; i++) {
                const key = sessionStorage.key(i);
                const val = sessionStorage.getItem(key);
                ans.push([key, val]);
            }
            return ans;
        }

        console.log(getAllSessionStorage());
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 应用

一些应用场景实例

跨域模块化