location

浏览器地址操作对象

• 路由重定向至新的URL

location.href = "/page"

• 刷新当前页面

location.reload(/*刷新*/)

• 如果把 reload(true) 方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样

localStorage

什么是 LocalStoages

1. 是对 Cookie 的优化
2. 永久本地存储
3. 在隐私模式下不可读取
4. 在所有同源窗口中都是共享的
5. 不能被爬虫爬取，不要用它完全取代URL传参

关键性的操作

key	操作
设置键值	localStorage.setItem("key", JSON.stringify(data))
获取键值	localStorage.getItem("key")
清楚键值	localStorage.removeItem("key")
清楚所有键值	localStorage.clear()

Fetch

用于前后端异步数据交互

• 使用方法

// 使用方法
fetch("url", {
    method: "POST",                 // 请求类型（GET, POST, PUT, DELETE, ...）
    headers: {                      // 请求头，含数据类型及 Token
        "Content-Type": "application/json"
    },
    body: JSON.stringify({}),       // 向服务器发送的数据
})
    .then(res => {
        if (res.status === 200) { } // 服务器返回200状态码及处理
        return res.json()
    })
    .then(data => { })              // 服务器返回的数据
    .catch(err => { })              // 错误处理

• 无注释代码（方便复制）

fetch("url", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({}),
})
    .then(res => {
        if (res.status === 200) { }
        return res.json()
    })
    .then(data => { })
    .catch(err => { })

Fetch 使用场景模拟

• 适用于单页WEB客户端

1. 用户登录

// 登录
fetch("/api/user/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
        Usermail: "你的帐号",
        Password: "你的密码",
    }),
})
    .then(res => {
        // 返回 200 则重新加载页面触发权限认证请求
        if (res.status === 200) { location.reload(/*刷新*/) }
        return res.json()
    })
    .then(data => {
        // 登录成功后将 token 存入 localStorage
        localStorage.setItem("token", JSON.stringify(data))
    })
    .catch(err => { error("登录请求失败") })

2. 权限认证请求

// 认证请求（页面加载时执行）
fetch("/api/user", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer " + JSON.parse(localStorage.getItem("token"))
        // 请求头中携带 token 请求服务器认证
    },
})
    .then(res => {
        // 返回 200 则对用户状态进行处理
        // 否则用户将没有权限访问当前页面（做跳转首页处理）
        if (res.status === 200) { this.user_status = true } else {
            this.user_status = false
            location.href = "/"
        }
        return res.json()
    })
    .then(data => { })
    .catch(err => { info("服务器繁忙") })

不定期更新！！