存储方式 - 前端学习

1. cookie是什么？你了解cookie吗？

在计算机领域中，特指一种由服务器发送到用户浏览器并保存在用户计算机上的小型文本文件。这个文件可以被服务器用来识别用户身份、跟踪用户活动、保存用户设置等。它通常由名称、值、域名、路径、过期时间等字段组成

1.1 cookie有那些属性？

Cookie 中属性的解释：
        ● Name：cookie的名字
        ● Value：cooke的值
        ● Path：定义了Web站点上可以访问该Cookie的目录
        ● Expires / Max-Age：表示cookie的过期时间，也就是有效值，cookie在这个值之前都有效。
        ● Size：表示cookie的大小
        ● HttpOnly：值为true时，Cookie只会在Http请求头中存在，不能通过doucment.cookie(JavaScript)访问Cookie。
        ● Secure：值为true时，只能通过https来传输Cookie。
        ● SameSite：
                ● 值为Strict，完全禁止第三方Cookie，跨站时无法使用Cookie。
                ● 值为Lax，允许在跨站时使用Get请求携带Cookie，下面有一个表格介绍Lax的Cookie使用情况。
                ● 值为None，允许跨站跨域使用Cookie，前提是将Secure属性设置为true。
       ● Priority：Cookie的优先级。值为Low/Medium/High，当Cookie数量超出时，低优先级的Cookie会被优先清除

1.2. Cookie 的生命周期

以前学习cookie就只知道cookie的一种存储方式，但其实cookie有两种方式，一种是会话性，一种是持久性

会话性：如果cookie为会话性，那么cookie仅会保存在客户端的内存中，当我们关闭客服端时cookie也就失效了；
持久性：如果cookie为持久性，那么cookie会保存在用户的硬盘中，直至生存期结束或者用户主动将其销毁

Cookie 使用的常见方法（服务端）：
        ● new Cookie(String name, String value)：创建一个Cookie对象，必须传入cookie的名字和cookie的值
        ● getValue()：得到cookie保存的值
        ● getName()：获取cookie的名字
        ● setMaxAge(int expiry)：设置cookie的有效期，默认为-1。这个如果设置负数，表示客服端关闭，cookie就会删除。0表示马上删除。正数表示有效时间，单位是秒。
        ● setPath(String uri)：设置cookie的作用域
        ● response.addCookie(Cookie cookie)：将cookie给客户端进行保存
        ● resquest.getCookies()：得到客服端传过来的所有cookie对象

Cookie 使用的常见方法（客户端）：

        ● JavaScript 可以使用 document.cookie 属性来创建、读取、及删除(覆盖) cookie

前端项目一般会对cookie进行封装

/*
    toString() 把 Date 对象转换为字符串
    toTimeString() 把 Date 对象的时间部分转换为字符串
    toDateString() 把 Date 对象的日期部分转换为字符串
    toGMTString() 请使用 toUTCString() 方法代替
    toUTCString() 根据世界时，把 Date 对象转换为字符串
    toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串
    toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串
    toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串
    UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数
    valueOf() 返回 Date 对象的原始值
    setItem("键","值",未来到期的毫秒值);
    removeItem("键");
    getItem("键")
    clear() 清除所有cookie
    getAllCookies() 返回所有cookie的键值对  组成一个对象
                    
*/
 
/** 根据键值设置cookie值,  [millisecond为过期的毫秒值] */
function setItem(key, value, millisecond) {
    let str = "";
    str = str + key + "=" + value;
    if (millisecond != "undefined") {
        // 现在的时间加上你限定的时间 就是到期时间
        let date = new Date(new Date().getTime() + millisecond).toUTCString();
        str += ";expires=" + date;
    }
    document.cookie = str;
}
 
/*
 *  根据键删除cookie
*/
function removeItem(key) {
    // 设定为 到期时间为 0 ，即可以删除cookie
    document.cookie = "" + key + "=" + "*;expires=" + new Date(new Date().getTime() - 1000).toUTCString();
}
 
/*
 *  根据键获取cookie值, 若未获取到返回 null
*/
function getItem(key) {
    let cookiesStr = document.cookie;
    if (cookiesStr == "") {
        return null;
    }
 
    let index = cookiesStr.indexOf(key + "=");
    if (index == -1) {
        return null;
    }
    index = index + key.length + 1;
    // 
    let cookieStr = cookiesStr.substring(index)
    // 此key值的最后一个字符的序号
    let subIndex = cookieStr.indexOf(";");
 
    if (subIndex != -1) {
        // 截取出来
        cookieStr = cookieStr.substring(0, subIndex);
    }
 
    return cookieStr;
}
 
/** 清除所有cookie */
function clear() {
    let cookieObj = getAllCookies();
    for (const key in cookieObj) {
        removeItem(key);
    }
}
 
/** 获取所有cookie, 返回一个cookie对象 */
function getAllCookies() {
    let cookiesStr = document.cookie;
    let cookieObj = new Object();
 
    // 当前cookie为空时,返回空对象
    if (cookiesStr == "") {
        return cookieObj;
    }
 
    let cookieArr = cookiesStr.split(";");
 
    for (let index = 0; index < cookieArr.length; index++) {
        let cookieKey = cookieArr[index].substring(0, cookieArr[index].indexOf("=")).trim();
 
        let cookieVal = cookieArr[index].substring(cookieArr[index].indexOf("=") + 1).trim();
 
        cookieObj[cookieKey] = cookieVal;
    }
 
    return cookieObj;
}

1.3 总结

总结：Cookie就是一些数据，用于存储服务器返回给客服端的信息，客户端进行保存。在下一次访问该网站时，客户端会将保存的cookie一同发给服务器，服务器再利用cookie进行一些操作。利用cookie我们就可以实现自动登录，保存游览历史，身份验证等功能。

2. 前端的储存方式有那些？

cookies：在 HTML5 标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带 cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie 浪费流量，每个 domain 限制 20 个 cookie，使⽤起来麻烦，需要⾃⾏封装；
localStorage：HTML5 加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删除），⼤⼩为5M，兼容IE8+ ；

localStorage.setItem("key","value");//存储
localStorage.getItems(key);//按key进行取值
localStorage.removeItems(key);//按key单个删除
localStorage.clear();//删除全部数据
localStorage.length;//获得数据的数量
localStorage.valueOf();//获取全部值

sessionStorage：与 localStorage 基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与 cookie、localStorage 不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式；

sessionStorage.setItem("key","value");//存储
sessionStorage.getItems(key);//按key进行取值
sessionStorage.removeItems(key);//按key单个删除
sessionStorage.clear();//删除全部数据
sessionStorage.length;//获得数据的数量
sessionStorage.valueOf();//获取全部值

Web SQL：2010 年被 W3C 废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实现，web sql 类似于SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换，较为繁琐；
IndexedDB：是被正式纳⼊HTML5 标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合web场景，同时⽤JavaScript 进⾏操作会⾮常便。