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

  • localStorage
  • sessionStorage
  • cookie

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关的解决方案,即LocalStoragesessionStorage,除了这两种以外,还有传统的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");
});

你可能感兴趣的:(前端数据存储,javascript,前端,服务器)