本地存储

http协议的一个特点是无状态，同一个客户端的这次请求和上次请求没有对应关系对服务器来说，它并不知道这两个请求来自同一个客户端，为了解决这个问题， Web程序引入了本地存储的机制来维护状态，服务器并不知道是谁访问的，但是可以识别浏览器。

cookie

cookie的简介

cookie是浏览器提供的一种机制，可以由JS对其进行操作(设置、读取、删除)
cookie是一种会话跟踪技术，是存储于访问者计算机中的一小块数据
会话：用户进入网站，开始浏览信息到关闭浏览器的过程，就称之为是一次会话
会话跟踪：浏览器和服务器之间在进行多次请求间共享数据的过程，称为会话跟踪技术

cookie的特性(服务器环境运行)：

cookie可以理解为是跨页面全局变量，但不能跨浏览器使用
cookie按照域名存储，不能跨域使用
cookie会随着HTTP请求自动发送给服务器
存储空间为4KB左右或 50条左右
可以设置有效期限，过期浏览器自动清除
设置和获取cookie的路径要同源,同一个服务器下(同源：同协议，同ip，同端口号)
cookie 存储时候和path 有关

有一个路径下： /index 路径存的cookie 那么获取的路径只能是它的同级或者比它小的路径
路径：/index/myindex : 可以获取上面路径的cookie
路径：/ 获取不到上面路径的cookie

cookie应用场景

会话状态管理（如用户登录状态、购物车等）
个性化设置（保存用户设置的样式等）
浏览器行为跟踪（如跟踪分析用户行为等）

前端操作cookie

每个cookie都是一个键/值对格式的字符串(key=value键值对)
可以在客户端可以操作，也服务端也可以操作cookie
设置cookie：
- 设置和获取cookie的路径要同源，同一个服务器下
- 同源：协议、域名、端口都要一样就是同源，才能获取对应的cookie ,非同源：跨域
- document.cookie="键名=键值";
- 如果要改变一个cookie的值，只能重新赋值
- document.cookie="user1=xh2";

设置有效期：

直接设置过期时间

 // 设置一个cookie，键值对为：age=20，3600秒过期
document.cookie = "age=20;Max-Age=3600";

domain=域名; 默认为当前域名
path=路径; 默认当前路径
读取cookie：

var cookies = document.cookie;

 console.log(1,(document.cookie),1);
            // age=20; age1=201   只能获取一个这样的形式，检测是否有空格添加括号1 'age=20; age1=201' 1
            // 是有空格的
            // 没办法精确获取，document.cookie.age
            console.log("精确获取",document.cookie.age);

只能够一次获取所有的cookie值

使用时必须自己解析这个字符串，来获取指定的cookie值

split() 方法用于把一个字符串分割成字符串数组

删除cookie：

cookie过期会自动消失
要删除一个cookie，可将其有效期设为一个过去的时间

document.cookie="age='';Max-Age=-1"

node.js操作cookie

操作cookie 需要借助第三方中间件： cookie-parser

const express = require("express");
const cookieParser = require("cookie-parser");
let app = express();
app.use(cookieParser());

设置cookie

app.get("/setCookie", (req, res) => {
    // 当有页面访问/setCookie的时候会给当前路由地址设置一个cookide键名：myname11，键值：zhangsan
    res.cookie("myname11", "zhangsan", {
        maxAge: 3600 * 1000, // 单位是毫秒 ；
        httpOnly:true  // 设置 cookie只能服务端操作，客户端修改不了
    })
})

访问之后才会被设置

获取cookiereq.cookies
删除cookieres.clearCookie("myname11");

总结

1.设置cookie:document.cookie="键名=键值";

2.覆盖修改cookie:document.cookie="user1=xh2";

3.设置过期时间,单位秒：document.cookie = "age=20;Max-Age=3600";

4.删除cookiedocument.cookie="age='';Max-Age=-1"

localStorage &sessionStorage

H5本地存储有 localStorage 与 sessionStorage 两种

localStorage与cookie相比的优点：

更大的存储空间，有5MB左右
不会随HTTP请求发送给服务器
有方便的API操作
localStorage :
- localStorage 为永久性保存数据，不会随着浏览器的关闭而消失
- 按域名进行存储，可以在同域名下跨页面访问，不会和其他域名冲突
- 按键值对存储：key/value
sessionStorage:

sessionStorage 为临时性保存数据，当页面关闭就会消失
sessionStorage 不能跨页面访问，只局限在当前的标签页使用
sessionStorage 各种操作与 localStorage 一样

操作：

保存或设置localstorage localStorage.setItem("age", 20);

如果key已经存在，则覆盖key对应的value

如果不存在则添加一个key/value
获取key对应的value，localStorage.getItem("myname")

如果key不存在则返回null
获取指定下标位置的key，不存在返回nulllocalStorage.key(0)
localStorage.length 获取数据条数（长度）

就相当于每一个键值对，然后每一个都使得长度加1.

配合key(index)方法可以实现遍历localStorage数据的方法,

遍历每一个存储的值：

for (var i = 0; i < localStorage.length; i++){
  console.log( localStorage.getItem( localStorage.key(i) ) )
}

将同域名下的所有数据都清空localStorage.clear()
删除某个键值localStorage.removeItem("myname")

存储复杂的localStorage

    // 键名：键值，JSON.stringify将数组转化为json类型的字符串，使用的时候要将它转回来
 localStorage.setItem("users",JSON.stringify( [{name:"张三",age:20},{name:"lisi",age:21}]));
        console.log(localStorage.getItem("users"));
        console.log(JSON.parse(localStorage.getItem("users")));

存储一个复杂的localstorage的时候，要注意，localstorage中只能存储JSON类型的数据，因此要使用方法转JSON

cookie,localStorage,sessionStorage