BOM操作 - 2

2022-06-18 11:33:10 阅读：155 来源： 互联网

标签：存储 name localStorage value cookie BOM cook 操作

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9