- localStorage
- sessionStorage
- cookie
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关的解决方案,即LocalStorage
和 sessionStorage
,除了这两种以外,还有传统的cookie
也能实现本地存储。
一 . window.sessionStorage
特性
- 生命周期为关闭浏览器窗口
- 在同一窗口(页面)下的数据可以共享
- 以键值对的形式储存使用
相关API
// 存储数据
sassionStorage.setItem(key,value)
// 获取数据
sessionStorage.getItem(key)
// 删除数据
sessionStorage.removeItem(key)
// 删除所有数据
sessionStorage.clear()
二 . window.localStorage
特性
- 生命周期永久生效,除非手动删除,否则关闭窗口(页面)也会存在
- 可以多窗口(页面)共享(只限于同一浏览器)
- 以键值对形式存在
相关API
//存储数据
localStorage.setItem(key, value)
// 获取数据
localStorage.getItem(key)
// 删除数据
localStorage.removeItem(key)
// 删除所有数据
localStorage.clear()
三 . cookie
为什么使用
浏览器无法区分多次请求是否发送自同一客户端
cookie是什么
- 就是前端第一次请求服务器
- 服务器将数据保存在 cookie 里,然后将 cookie 发送给前端保存
- 前端再次访问服务器,会带上 cookie
使用方法
1. 原生使用:
- 原理:
res.set
可以在响应头中设置名值对;利用此也可以设置cookie,响应头中表示cookie的属性是Set-cookie
,它的值是cookie的名值对
1.1res.set("suibian", "hahahah");
2 结合express使用
res.set("Set-cookie", ["name1=zhangsan", "name2=lishi"]);
- 设置cookie的过期时间,域,路径:用分号隔开
- max-age,设置cookie的过期时间
- expires,同max-age,只不过是utc时间;
(new Date()+1000*10).toUTCString()
,10后过期 - domain,域;设置在什么域名下cookie可以显示;api.xl.com表示只有在这个作用域下cookie才能显示;.xl.com表示只要在xx.xl.com作用域下cookie就能显示
- path,路径;path=/abc表示只有在路径名或根路径名是/abc的时候cookie才能显示
res.set("Set-cookie", ["name=zhangsan;max-age=10;domain=.xl.com;path=/","age=19"])
- 获取cookie
req.headers.cookie
- html页面通过
document.cookie
获取
- 删除cookie
- res.set(“Set-cookie”,“name=adsf;max-age=0”);
let express = require("express");
let app = express();
app.get("/setCookie", (req, res) => {
res.set("Set-cookie", ["name1=zhangsan", "name2=lishi"]);
res.end("set");
})
app.get("/getCookie", (req, res) => {
res.end(req.headers.cookie)
})
app.get("/deleteCookie", (req, res) => {
res.set("Set-cookie","name=adsf;max-age=0");
res.end("delete")
})
app.listen(80, () => {
console.log(123);
})
3 cookieParser使用(中间件)
- 需要配合express使用
- 引入cookie-parser
- 使用中间件
app.use(cookieParser())
- 设置cookie:
res.cookie(“名”,”值”,{配置对象})
- 获取cookie
req.cookies
- 删除cookie
res.clearCookie("名")
res.cookie("名","随便",{maxAge:0})
let express = require("express");
let cookieParser = require("cookie-parser");
let app = express();
app.use(cookieParser());
// 设置cookie
app.get("/setCookie", (req, res) => {
res.cookie("username", "zhangsan");
res.cookie("age","18",{
maxAge:1000,
})
})
// 获取cookie
app.get("/getCookie", (req, res) => {
console.log(req.cookies);
})
// 删除cookie
app.get("/deleteCookie", (req, res) => {
res.clearCookie("username");
res.cookie("username","suibian",{
maxAge:0
})
})
app.listen(80, () => {
console.log("ok");
});