1. cookies:大小限制4k,携带在http请求上,一般放一些用户信息,不存储数据
2. sessionStorage:会话存储,浏览器窗口关闭自动销毁
3. localStorage:本地存储,不主动销毁,一直存在
4. session:直接存token不安全,session把key放在cookies,value存在服务器,导致了服务器需要帮助大量用户存放数据,而且用户访问不同的服务器有地区限制
5. jwt:解决session,是由两个.分割出的三段字符段,修改一个字符,数据就报错,服务器只用使用解密方式解密就可以了
Web Storage浏览器存储,localStorage本地存储、sessionStorage会话存储
localStorage本地存储、sessionStorage会话存储:API都一样
方法和属性 | 描述 |
---|---|
setItem(key, value) | 该方法接收一个键名和值作为参数,将会把键值对添加到存储中,如果键名已存在,则更新其对应的值。 |
getItem(key) | 该方法接收一个键名作为参数,返回键名对应的值。 |
removeItem(key) | 该方法接收一个键名作为参数,并把该键名和值从存储中删除。 |
length | 类似数组的 length 属性,用于访问 Storage 对象中 item 的数量。 |
key(n) | 用于访问第 n 个 key 的名称。 |
clear() | 清除当前域下的所有键值对。 |
区别:
-
localStorage 本地
-
保存在电脑中,浏览器关闭,数据依旧在(小电影的浏览记录也都在)
-
-
sessionStorage 会话
-
保存在浏览器窗口中,浏览器关闭,数据消失
-
在使用 Web Storage 前,应检查浏览器是否支持 localStorage 和 sessionStorage:
//判断Storage类型如果不为undefined,代表可以识别类型,浏览器支持
if (typeof(Storage) !== 'undefined') {
console.log('支持 localStorage、sessionStorage 对象');
// 一些代码......放下边的function函数和方法
} else {
console.log('抱歉,不支持 web 存储');
}
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>存储和移除字符串</title>
</head>
<body>
<button onclick="save()">存储</button>
<button onclick="read()">读取</button>
<button onclick="remove()">移除</button>
<p>存储的值:<span id="result"></span></p>
<script>
function save() {
// 存储字符串
localStorage.sitename = '百度一下';
}
function read() {
// 读取字符串
document.getElementById('result').innerText = localStorage.sitename;
}
function remove() {
// 移除字符串
localStorage.removeItem('sitename');
}
</script>
</body>
</html>