1、cookie

• 用服务环境打开 Live Server cookie

特点：

• 1️⃣、大小只有5kb
• 2️⃣、保存到cookie中的数据只能是字符串
• 3️⃣、关闭浏览器，cookie消失

设置cookie

//设置cookie
document.cookie = 'qwewetert';
document.cookie = 'qwe=123';

//封装设置cookie的方法
 function setCookie(name, value) {
        // document.cookie = name + '=' + value;
        document.cookie = `${name}=${value}`;
    }

获取cookie的方法

• 从cookie中直接获取到的全部是字符串（字符串形式的数组/对象）
• JSON.parse() 将字符串形式的数组或对象转化成数组或对象

 //封装一个获取cookie 的方法
    function getCookie(name) {
        //获取cookie
        var cook = document.cookie;
        //将获取到的字符串转化成数组  以分号和空格分隔开
        cook = cook.split('; ');
        //声明一个新数组，用来保存转化后的数组
        var arr = []
        //使用for循环
        for (var i = 0; i < cook.length; i++) {
            arr[i] = cook[i].split('=');

            if (arr[i][0] == name) {
                return arr[i][1]
            }
        }
    }

2、本地储存 localStorage

• 本地存储：是浏览器上的一片存储空间，用来永久保存数据，该空间按照域名互相独立隔离，但同一域名下的文件可以共享数据。

特点：

• 1、大小为5M
• 2、保存到localStorage中的数据是一个对象
• 3、生命周期为不手动删除则永远存在
• 4、兼容IE8以上
• 可以暂存一些本地数据在浏览器上，实现离线应用的开发
• 实现同域名下文件间的数据传递

设置localStorage

 window.localStorage.user = JSON.stringify('123');

 //封装一个 设置 localStorage 的方法
function setLocal(key,value){
     localStorage[key] = JSON.stringify(value);
}

查找localStorage

var local = localStorage.user;

删，清除全部内容

localStorage.clear();

3、会话储存 sessionStorage

• 会话存储 : sessionStorage 存储区大小，存储特点与本地存储完全一致，区别在于：
• 1、本地存储是永久存储；
• 2、会话存储只是在会话期间存储；
• 3、会话关闭数据就销毁,用来存储一些应用中的临时数据

 //会话存储
    sessionStorage["code_id"] = "balooalex"

    sessionStorage["cart_list"] = JSON.stringify([
        {
            name : "娜娜",
            age : 21
        },
        {
            name : "小林",
            age : 20
        }
    ])

标签：存储,name,localStorage,value,cookie,BOM,cook,操作
来源： https://www.cnblogs.com/liujianjun/p/16387944.html