# Web Storage

# 参考文档

# 简介

前端开发中，想要实现本地数据存储，在 HTML5 之前，是通过 Cookie 的方式实现的，但是由于 Cookie 中所能存储数据容量有限，并且 Cookie 总是附加在对服务器的请求中，每次请求时都要带上这些无需传输给服务器的数据，从而影响了请求效率，所以出现了 Web Storage。

Web Storage 是 HTML5 新增的特性，能够在本地浏览器存储数据。它是 window 的子对象，分为两种:

window.sessionStorage
window.localStorage。

# Session Storage

从名字可知，SessionStorage 是基于 session 的，当 session 结束（关闭浏览器标签页）后存储的数据就被删除了。

仅在当前窗口有效，哪怕是同一个页面，在同一个浏览器中，只要是两个窗口就不共享。

# Local Storage

LocalStorage 中的数据在 session 结束后数据并不会被删除，而是保存在了计算机上，除非手动清理掉。所以当建立访问该站点的新 session 后仍然可以使用这些数据（同域下）。

同域内都可以共享，无论哪个页面，哪个窗口。

类型	作用域	储存容量	数量限制	有效期	是否会发送给服务器
SessionStorage	当前窗口中	5M 或更大	-	一次会话	N
LocalStorage	所有同源窗口	5M 或更大	-	永久（除非手动移除）	N
Cookie	所有同源窗口	4K	有	过期时间内有效	Y

Cookie 和 WebStorage 都是基于 domain 的。
- 同域即：协议、IP、端口一致。
Cookie 在每个域内总数是有限的，IE6 或更低版本最多 20 个，IE7 和之后的版本最后可以有 50 个，Firefox 最多50个。
Cookie 数据始终在同源的 http 请求中携带(即使不需要)，即 Cookie 在浏览器和服务器间来回传递，占用资源。
Cookie 数据有路径（path）的概念，可以限制 Cookie 只属于某个路径下。
WebStorage 支持事件通知机制，可以将数据更新的通知发生给监听者。

# Web Storage API

Web Storage 有 1 个属性和 4 种常用的方法：

length
- 当前 Storage 对象中存储的 k-v 总数。
getItem("k")
- 返回 key 对应的值，如不存在，返回 null。
setItem("k",v)
- 将 key 对象的值设置为 value，value 为 String 类型。
- 当设置失败，比如用户将本地存储禁用，或者本地存储超过限制的大小时，抛出 QuotaExceededError 错误。
removeItem("k")
clear()
- 清除所有的 k-v 值。

注意：

storage 中 k & v 都只能是 String 类型的值，如果有对象需要使用 JSON.stringify(obj)。
除了使用 API 存取，也可以像普通对象一样用点 . 操作符，及 [] 的方式进行数据存取。

# 示例

点击展开测试代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test WebStorage</title>
    </head>
    <body>
        <!-- localStorage -->
        <h2>localStorage</h2>
        <button onclick="saveLocalData()">保存一个 local 数据</button>
        <button onclick="removeLocalData()">移除一个 local 数据</button>
        <button onclick="getLocalData()">获取一个 local 数据</button>
        <button onclick="clearLocalData()">清除 local 数据</button>
        
        <!-- sessionStorage -->
        <h2>sessionStorage</h2>
        <button onclick="saveSessionData()">保存一个 session 数据</button>
        <button onclick="removeSessionData()">移除一个 session 数据</button>
        <button onclick="getSessionData()">获取一个 session 数据</button>
        <button onclick="clearSessionData()">清除 session 数据</button>
    </body>
</html> 
<script>
    // localStorage
    function saveLocalData() {
        let user = {
        name: 'mario',
        age: 18
        }
        // window.localStorage.setItem('user',JSON.stringify(user))
        window.localStorage.setItem('lname','wow56')
    }
    function removeLocalData() {
        window.localStorage.removeItem('lname')
    }
    function getLocalData() {
        console.log(localStorage.getItem('lname'))
    }
    function clearLocalData() {
        window.localStorage.clear()
    }
    // sessionStorage
    function saveSessionData() {
        window.sessionStorage.setItem('sname','wow56')
    }
    function removeSessionData() {
        window.sessionStorage.removeItem('sname')
    }
    function getSessionData() {
        window.sessionStorage.getItem('sname')
    }
    function clearSessionData() {
        window.sessionStorage.clear()
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 讨论区

由于评论过多会影响页面最下方的导航，故将评论区做默认折叠处理。

点击查看评论区内容，渴望您的宝贵建议~

← HTML