浏览器存储

本地存储

http协议的一个特征是 无状态

需求：记录用户的状态信息
登录状态、浏览器记录、购物车商品列表、用户的个性化设置。。。
浏览器提供了一个机制，在用户的计算机中存储某些信息，cookie 用于存储用户的状态信息，存储在客户端。

一，cookie

简介

cookie 是浏览器提供的一种机制，用来记录用户的状态信息

cookie 是一种会话跟踪技术，是存储在用户计算机中的一小块数据
前端可以使用JS来操作cookie
服务端通过响应头的设置，也能操作cookie
cookie常常与session配合使用，来记录用户的状态信息

cookie的特征：
1.cookie需要在服务器环境运行
2.cookie可以实现跨页面全局变量，但是不能跨浏览器使用
3.同一个网站多个页面共享一套cookie数据，但是不能跨域使用
4.cookie会随着http请求自动发送到服务端
5.cookie可以设置有效期（过期会被浏览器清除）
6.存储空间只有4KB左右或50条左右
7.cookie没有方便操作的API
8.兼容性好，无需安装额外的插件

---

设置cookie

// cookie数据格式：key = value;
document.cookie = 'user1=xiaocuo' // 设置cookie
document.cookie = 'user2=xiaoming' // 设置cookie
document.cookie = 'user3=xiaohong' // 设置cookie

document.cookie = 'user2=xiaofang' // 修改cookie

// 设置cookie的域名：
document.cookie = 'user4=xiaowang; domain=127.0.0.1'

// 设置cookie的路径：
document.cookie = 'user5=xiaowei; path=/static/abc'

// 设置cookie的有效期：expires=日期对象
// 如果没有设置有效期，默认都是session（会话级别的cookie，离开当前页面就被销毁）
var d = new Date()
// d.setDate(d.getDate()+1) // 有效期一天
d.setMinutes(d.getMinutes()+1)// 有效期一分钟
document.cookie = 'user6=xiaozhao; expires='+d

document.cookie = 'user7=xiaozhang; domain=localhost; path=/static; expires='+d

---

封装一个cookie

// 设置cookie
function setCookie(options){
    // key和val是必填参数
    if (!options.key || !options.val) {
        throw new Error('缺少必填参数')
    }

    // 设置默认参数
    options.domain = options.domain || ''
    options.path = options.path || ''
    options.exp = options.exp || ''

    if (options.exp) {
        // 要设置有效期
        var d = new Date()
        d.setMinutes(d.getMinutes()+options.exp)
        document.cookie = options.key+'='+options.val+'; domain='+options.domain+'; path='+options.path+'; expires='+d
    } else {
        // 无需设置有效期
        document.cookie = options.key+'='+options.val+'; domain='+options.domain+'; path='+options.path
    }
}

// 获取cookie
function getCookie(key){
    var arr = document.cookie.split('; ')
    var result = null
    arr.forEach(function (item){
        var arr2 = item.split('=')
        if (arr2[0] === key) {
            result = arr2[1]
        }
    })
    return result
}

// 删除cookie
function removeCookie(key){
    setCookie({
        key: key,
        val: '123',
        exp: -60*10
    })
}