浏览器本地存储的学习

本地存储

将不需要存储在服务器中的数据，只需要在本地客户端使用的数据，存储在本地存储中。

特点

• 只能存字符、文本
• 大小限制
• 数量限制
• 不允许跨域，不允许跨浏览器，不允许跨路径
• 时间限制

分类

• cookie
  • 老牌技术，无兼容
  • 使用方法麻烦，没有自带的方法，需要自己封装
  • 特点
    • 大小：4K~
    • 数量：50~
    • 时间：默认会话级，可以指定时间
  • 会自动跟随http协议，发往服务器
• localStorage
  • html5标准中新增技术，低版本浏览器不支持
  • 使用方法方便，有自带的方法，不需要自己封装
  • 特点
    • 大小：2M~10M
    • 时间：永久级
  • 不会跟随http协议，发往服务器。真正的本地存储
• sessionStorage
  • html5标准中新增技术，低版本浏览器不支持
  • 使用方法方便，有自带的方法，不需要自己封装
  • 特点
    • 大小：2M~10M
    • 时间：会话级（关闭浏览器自动删除）
  • 不会跟随http协议，发往服务器。真正的本地存储

cookie的介绍和使用

cookie的由来

• 通信协议：ip，tcp，udp，http无状态协议
  • http每次连接之后会断开，
  • 两次连接，无法数据交互
• 会话跟踪技术：记录http每次连接过程中产生的数据或状态，方便之后的连接使用
  • cookie

cookie的使用

• 没有自带的方法，只能通过基本操作，自己封装
• 运行在服务器环境下
• cookie的语法要求：
  • 字符
  • key=value的格式
  • 一次只能操作一条cookie
  • 使用分号隔开cookie的内容和配置信息
  • 路径配置关键字：path=路径
  • 有效期的配置关键字：expires=日期对象
• 基本操作：document.cookie = “…”
  • 增

// 增会话级
document.cookie = "abc=10";

// 增指定有效期
const d = new Date();
d.setDate(d.getDate()+3);
document.cookie = "qwe=20;expires="+d;

// 增指定路径
document.cookie = "asd=30;path=/abc";

// 增指定有效期+指定路径
const d = new Date();
d.setDate(d.getDate()+7);
document.cookie = "zxc=40;expires="+d+";path=/abc";

• 删

// 删(修改有效期)(过期！)
const d = new Date();
d.setDate(d.getDate()-1);
document.cookie = "zxc=anhcgafc;expires="+d;

• 改

// 改默认路径
document.cookie = "zxc=hello";

// 改指定路径
document.cookie = "zxc=四十;path=/abc";

• 查

// 查默认路径
console.log(document.cookie);

// 根据指定名字，查对应的值
let str = document.cookie;
str.split("; ").forEach(val=>{
    // console.log(val)
    // console.log(val.split("="))
    if(val.split("=")[0] === "sex"){
        console.log(val.split("=")[1])
    }
});

cookie增删改查的封装

• 增

// 设置cookie封装
function setCookie(key, val, ops={}){
    // 根据参数处理有效期部分的字符
    let e = "";
    if(ops.expires){
        const d = new Date();
        d.setDate(d.getDate() + ops.expires)
        e = ";expires="+d;
    }
    // 根据参数处理路径部分的字符
    let p = "";
    if(ops.path){
        p = ";path="+ops.path
    }
    // 使用字符串拼接，设置cookie
    document.cookie = `${key}=${val}${e}${p}`;
}

• 改(修改就是把原值覆盖,所以和新增的方法相同)

• 删

// 删除cookie
function removeCookie(key, ops={}){
    // 将配置信息中的有效期部分，设置为-1
    ops.expires = -1;
    // 调用设置cookie，将key和配置信息传入，利用设置cookie，将指定cookie的有效期设置为过去的日期
    setCookie(key, "任意值", ops);
}

• 查

// 获取cookie
function getCookie(key){
    // 获取所有cookie，解析出每组cookie
    const arr = document.cookie.split("; ")
    // 遍历得到每组cookie
    for(let i=0;i<arr.length;i++){
        // 解析出cookie的名字，比对
        if(arr[i].split("=")[0] === key){
            // 返回cookie对应的值
            return arr[i].split("=")[1];
        }
    }
    // 遍历后，如果没有找到符合条件的cookie，返回null
    return null;
}

localStorage的介绍和使用

本地存储，不会随着http协议发往服务器，永久存储

localStorage是window的子对象

对象操作：点语法或中括号语法

• 增，删，改，查

方法操作

• 增&改：localStorage.setItem(“key”,“val”);
• 查：localStorage.getItem(“key”);
• 删单个：localStorage.removeItem(“key”);
• 删全部：localStorage.clear(); 慎用

sessionStorage的介绍和使用

除了有效期是会话级之外，所有内容同localStorage

案例

记住拖拽的效果

html

<div class="box"></div>

css

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
}

js

class Drag {
    constructor() {
        this.box = document.querySelector(".box");
        // 初始化
        this.init();
        // 按下
        this.addEvent();
    }
    init() {
        // 初始化时考虑是否有本地存储
        const Ostroage = localStorage.getItem("obj") ? JSON.parse(localStorage.getItem("obj")) : {}
        this.box.style.left = Ostroage.left;
        this.box.style.top = Ostroage.top;
    }
    addEvent() {
        const that = this;
        this.box.onmousedown = function (eve) {
            // 鼠标按下的事件对象
            that.downE = eve || window.event;
            that.down();
        }
    }
    down() {
        const that = this;
        document.onmousemove = function (eve) {
            // 鼠标移动的事件对象
            that.moveE = eve || window.event;
            that.move();
        }
        document.onmouseup = function () {
            that.up();
        }
    }
    move() {
        this.box.style.left = this.moveE.pageX - this.downE.offsetX + "px";
        this.box.style.top = this.moveE.pageY - this.downE.offsetY + "px";
    }
    up() {
        document.onmousemove = document.onmouseup = null;
        // 鼠标抬起时将当前left和top保存到本地存储,初始化时使用本次存储的数据
        const obj = {
            left: this.box.style.left,
            top: this.box.style.top
        }
        localStorage.setItem("obj", JSON.stringify(obj));
    }
}
new Drag();

记住账号密码

思路与上个例子相同,代码就不写类似的注释了

html

<label>用户名</label><input type="text" id="name"><br>
<label>密码</label><input type="password" id="password"><br>
<input type="checkbox" id="checkbox"><span>记住密码</span><input type="button" value="提交" id="submit">

js

class Remenber {
    constructor() {
        this.name = document.querySelector("#name");
        this.password = document.querySelector("#password");
        this.submit = document.querySelector("#submit");
        this.checkbox = document.querySelector("#checkbox");

        this.readData();
        this.addEvent();
    }
    readData() {
        console.log(JSON.parse(localStorage.getItem("msg")))
        const obj = localStorage.getItem("msg") ? JSON.parse(localStorage.getItem("msg")) : {
            name: "",
            password: ""
        };
        this.name.value = obj.name;
        this.password.value = obj.password;
    }
    addEvent() {
        const that = this;
        this.submit.addEventListener("click", function () {
            const obj = {
                name: "",
                password: ""
            }
            // 如果复选框勾选了记住密码就存储数据
            if (that.checkbox.checked) {
                obj.name = that.name.value;
                obj.password = that.password.value;
                localStorage.setItem("msg", JSON.stringify(obj));
            }
        });
    }
}
new Remenber();