Web-API 存储早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

摘要

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。

cookie

本身用于浏览器和 server 通讯
被“借用”到本地存储来
以 name/value 对形式存储，如：username = 张三

缺点

存储大小，最大4KB
http 请求时需要发送到服务端，增加请求数据量
只能用 document.cookie = '...' 来修改

创建 cookie

document.cookie = "username = 张三"

// 添加过期时间，默认时 cookie 在浏览器关闭时删除
document.cookie = "username = 张三; expires = Thu, 18 Dec 2022 12:00:00 GMT"

// 使用 path 参数设置 cookie 的路径
document.cookie = "username = 张三; path = /"

读取 cookie

var x = document.cookie
console.log(x) // username=张三

修改 cookie

document.cookie = "username = 李四" // 旧的 cookie 将被覆盖

删除 cookie

只需设置 expires 参数为当前时间即可，不必指定 cookie 的值

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

localStorage 和 sessionStorage

HTML5 专门为存储而设计，最大可存5M
API 简单易用，setItem getItem
不会随着 http 请求发送出去
以 key/value 形式存储

区别

localStorage：数据永久存储，保存的数据没有过期时间，直到代码或手动删除
sessionStorage：数据只存在于当前会话（或标签页），关闭窗口或标签页后会删除数据

使用

使用前，先检查浏览器是否支持 localstorage 和 sessionStorage

if (typeof window.localStorage == 'undefined') {
    alert("浏览器不支持 localStorage")
    return false
}

// 存储
localStorage.sitename = "稀土掘金"

// 查找
document.getElementById("result").innerHTML = localStorage.sitename

常用 API （localStorage 为例）

保存数据：localStorage.setItem(key, value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的 key：localStorage.key(index)

Web-API 存储

摘要