三种本地存储方式 localStorage & sessionStorage & cookie

• localStorage
• sessionStorage
• cookie

随着互联网的快速发展，基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关的解决方案，即LocalStorage 和 sessionStorage，除了这两种以外，还有传统的cookie也能实现本地存储。

一 . window.sessionStorage

特性

1. 生命周期为关闭浏览器窗口
2. 在同一窗口（页面）下的数据可以共享
3. 以键值对的形式储存使用

相关API

 // 存储数据
 sassionStorage.setItem(key,value)

 // 获取数据
 sessionStorage.getItem(key)

 // 删除数据
 sessionStorage.removeItem(key)

 // 删除所有数据
 sessionStorage.clear()

二 . window.localStorage

特性

1. 生命周期永久生效，除非手动删除，否则关闭窗口（页面）也会存在
2. 可以多窗口（页面）共享（只限于同一浏览器）
3. 以键值对形式存在

相关API

 //存储数据
 localStorage.setItem(key, value)

 // 获取数据
 localStorage.getItem(key)

 // 删除数据
 localStorage.removeItem(key)

 // 删除所有数据
 localStorage.clear()

三 . cookie

为什么使用

浏览器无法区分多次请求是否发送自同一客户端

cookie是什么

• 就是前端第一次请求服务器
• 服务器将数据保存在 cookie 里，然后将 cookie 发送给前端保存
• 前端再次访问服务器，会带上 cookie

使用方法

1. 原生使用：

1. 原理:res.set可以在响应头中设置名值对;利用此也可以设置cookie,响应头中表示cookie的属性是Set-cookie,它的值是cookie的名值对
   1.1res.set("suibian", "hahahah");

2 结合express使用

1. res.set("Set-cookie", ["name1=zhangsan", "name2=lishi"]);
2. 设置cookie的过期时间,域,路径:用分号隔开
   1. max-age,设置cookie的过期时间
   2. expires,同max-age,只不过是utc时间;(new Date()+1000*10).toUTCString(),10后过期
   3. domain,域;设置在什么域名下cookie可以显示;api.xl.com表示只有在这个作用域下cookie才能显示;.xl.com表示只要在xx.xl.com作用域下cookie就能显示
   4. path,路径;path=/abc表示只有在路径名或根路径名是/abc的时候cookie才能显示
   5. res.set("Set-cookie", ["name=zhangsan;max-age=10;domain=.xl.com;path=/","age=19"])
3. 获取cookie
   1. req.headers.cookie
   2. html页面通过document.cookie获取
4. 删除cookie
   1. 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使用（中间件）

1. 需要配合express使用
2. 引入cookie-parser
3. 使用中间件app.use(cookieParser())
4. 设置cookie:
   1. res.cookie(“名”,”值”,{配置对象})
5. 获取cookie
   1. req.cookies
6. 删除cookie
   1. res.clearCookie("名")
   2. 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");
});