存储大小
cookie:不能超过4K。
sessionStorage与localStorage:比cookie大得多,可以达到5M甚至更大。
有效时间
localStorage:存储持久化数据,浏览器关闭后数据不会丢失,除非主动删除数据。
sessionStorage:数据在浏览器关闭后自动删除。
cookie:可以设置过期时间,在cookie过期时间之前一直有效,浏览器窗口关闭后数据不会丢失。
与服务器的交互方式
cookie:通过http,在浏览器和服务器传递。数据会自动传递到服务器,服务器也可以写cookie到客户端。
sessionStorage与localStorage:不会自动把数据发给服务器,仅在客户端本地保存。
作用域
cookie:在所有同源窗口共享。
sessionStorage:仅在一个浏览器共享,不同浏览器不共享。
localStorage:在所有同源窗口共享。
代码展示
cookie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cookie封装</title>
</head>
<body>
<script src="./cookie.js"></script>
<script>
// 设置cookie
setCookie("username", "吴甜馨", 1)
setCookie("password", "tianxin0722", 2)
setCookie("age", 22, 2)
// 获取cookie
getCoookie("username")
getCoookie("password")
getCoookie("age")
// 删除cookie
removeCookie("age")
// 设置cookie
function setCookie(key, val, t) {
var time = new Date()
time.setDate(time.getDate() + t)
document.cookie = key+"="+val+";expires="+time
}
// 获取cookie
function getCoookie(key) {
var cookies = document.cookie
var arr = cookies.split(";")
for(var i=0;i<arr.length;i++) {
var newarr = arr[i].trim().split("=")
if(newarr[0] == key) {
console.log(newarr[1]);
}
}
}
// 删除cookie
function removeCookie(key) {
setCookie(key, '', -1)
}
</script>
</body>
</html>
localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>localstorage</title>
</head>
<body>
<script>
// 设置localstorage
localStorage.setItem("username", "wutianxin")
localStorage.setItem("password", "tianxin0722")
localStorage.setItem("age", 22)
// 数据为对象格式, 在设置时需要将数据转为字符串格式
var person = {
name: "崔梦豪",
age: 23,
sex: "男"
}
localStorage.setItem("person", JSON.stringify(person))
// 获取localstorage
localStorage.getItem("username")
console.log(localStorage.getItem("username"))
// 获取对象格式的数据时,需要将数据重新转为对象格式,否则无法单独获取对象中的单条数据
console.log(localStorage.getItem("person"))
console.log(JSON.parse(localStorage.getItem("person")))
console.log(JSON.parse(localStorage.getItem("person")).name)
// 打印所有的localstorage
console.log(localStorage)
console.log(localStorage.length)
console.log(localStorage.key(0));
console.log(localStorage.getItem(localStorage.key(0)));
// 删除localstorage
localStorage.removeItem("age")
// localStorage.clear()
</script>
</body>
</html>
sessionStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sessionstorage</title>
</head>
<body>
<script>
window.addEventListener('storage', function(e) {
console.log(e);
})
// 设置sessionStorage
sessionStorage.setItem("name", "崔梦豪")
sessionStorage.setItem("age", 23)
// 获取sessionStorage
console.log(sessionStorage.getItem("name"));
// 删除sessionStorage
sessionStorage.removeItem("age")
sessionStorage.clear()
</script>
</body>
</html>