JSON字符串、本地存储cookie，localstorage

最新推荐文章于 2022-10-17 21:37:19 发布

又菜又不想学的小张

最新推荐文章于 2022-10-17 21:37:19 发布

阅读量392

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45108358/article/details/121523605

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. JSON字符串

定义：用于描述对象或数组的字符串。

作用：用于前后端交互

1.1 注意事项

{ } 表示一个对象
表示数组
键与值之间用“：”分割。
属性之间用“，”分割。
属性名必须用双引号
值可以是字符串，数字，布尔值,null，对象，数组。不要用NaN.
最后一位不能是逗号。

1.2 JSON与(数组)之间的转换

方法：JSON.parse(JSON字符串)

返回的值：转换好的js对象(数组)；

//JSON字符串转数组或者对象
let s = '{"name":"小黑","age":20,"hobby":"唱歌"}';
console.log("json字符串：" + s);
let o = JSON.parse(s);
console.log("转换得到的对象");
console.log(o);

结果：在这里插入图片描述

1.3 对象转JSON字符串

方法：JSON.stringIfy(数组/对象)

返回的值：JSON字符串

注意：转换时，对象的函数会被过滤掉

let p = {
    name: '小黑',
    age: 20,
    eat() {
        console.log('玩玩玩');
    }
};
console.log(p);
let s = JSON.stringify(p)
console.log("转换好的字符串：" + s); //与'{"name":"小黑","age":20}'一样

结果：
在这里插入图片描述

1.4 实现深拷贝

步骤：可以先将对象转为json字符串，再转回对象。再转回的对象和原来的对象不相等

// 先转换成JSON字符串
let s = JSON.stringify(p);
// 再将JSON字符串转换成对象
let p1 = JSON.parse(s);
console.log(p1);

console.log(p1.friend == p.friend); //false
p1.friend[1].name = "不知道";
console.log(p);
console.log(p1)

2. 本地存储

2.1 cookie()

缺点：cookie操作不方便，大小只有4kb。需要服务器环境

说明：在存储的时候只能以字符串的形式进行存储

作用：是用来解决如何记录浏览器中的用户信息问题的。

应用场景：购物车和记住用户名密码

规则： 1. 键值对形式来存储数据的。

	    2. 多个键值对之间用分号;分割。

特点：1. 时效性：会话cookie和持久cookie。

2. 会话cookie：浏览器退出，就被删除了。

3. 持久cookie：只要不到失效时间，就算电脑重启了，cookie仍然存在。

注意：在使用cookie的时候页面必须在服务器环境下打开才可以使用cookie！！！

使用： js通过document.cookie来创建，读取，删除 cookie。

2.1.1 创建/添加cookie

方式： document.cookie = "k=v"; //k：key 表示键 v：value 表示

注意：多次添加，需要分别设置。

设置的有效期默认为会话级别，浏览器关闭就会失效。

设置有效期：document.cookie = "k=v;expires='+date对象";

【注意】 cookie的时间以格林威治时间为准。

document.cookie = 'name=zhangsan';
document.cookie = 'age=40';
console.log(document.cookie);//查看(读取)在控制台

2.1.2 修改

将cookie重新添加一遍。和添加的语法一样。有则修改，无则新增。

2.1.3 删除

只需要将过期时间设置为已经过去的时间即可。expire参数

// 删除 expire（设置一个过期的时间就ok了）
document.cookie = 'name=zhangsan;expires=' + new Date('2020/01');

注意：键和值之间必须使用“=”来表示，否则不成功

document.cookie = 'age=40';

2.1.4 cookie()的封装

<script>
    function setCookie(k, v, exp) {
    if (exp) {
        var d = new Date();
        d.setTime(d.getTime() + exp * 60 * 60 * 1000);
    }
    // 三元表达式写法。
    let str = `${k}=${v}`
    d ? str += `;expires=${d.toGMTString()}` : 1;
    document.cookie = str;

    // 如果d有值，说明传入了有效期
    // if (d) {
    //   document.cookie = `${k}=${v};expires=${d.toGMTString()}`;
    // } else {
    //   //如果d没值，cookie默认为会话级别。
    //   document.cookie = `${k}=${v};`;
    // }
}

// setCookie("name","zhangsan",1);
// setCookie("age",20,1);

// console.log(document.cookie);

function getCookie(k) {
    // 先按照；分割 多个键值对
    let arr = document.cookie.split(";");
    for (let i = 0; i < arr.length; i++) {
        // 一个键值对使用=分割
        let tmp = arr[i].split("=");
        if (tmp[0].trim() == k) {
            return tmp[1];
        }
    }
}
let age = getCookie("age");
console.log(age);
</script>

2.2 localstorage

2.2.1 cookie()与 localstorage的区别

cookie操作不方便，大小只有4kb。需要服务器环境；在存储的时候只能以字符串的形式进行存储
localstorage 方法操作简单，大小有5M 不需要服务器环境

2.2.2 基本使用

使用window.localstorage来操作localstorage。

注意：有兼容性问题，IE低版本不要使用。

2.2.3 添加键值对

localStorage.setItem('name', '小黑');
localStorage.setItem('age', 20);

2.2.4 删除键值对

localStorage.removeItem('age');

2.2.5 获取键值对中的值

var val = localStorage.getItem('name');
console.log(val); //结果：小黑

2.2.6 清空

localStorage.clear();
console.log(localStorage);

2.3 sessionStorage

与localstorage的区别：

localstorage有效期是永久。
sessionStorage有效期是会话级别。

2.3.1 添加键值对

// 是会话级别的
let seii = window.sessionStorage;
console.log(seii);
seii.setItem('name', '小红');
seii.setItem('hobby', '睡懒觉');
console.log(seii);

2.3.2 删除键值对

seii.removeItem('name');
console.log(seii);

2.3.3 获取值

var ss = seii.getItem('hobby');
console.log(ss);

2.3.4 清空

seii.clear();
console.log(seii);

小案例：记住密码和用户名

html部分

用户名：<input type="text" id="username">
<br> 密&nbsp;&nbsp;&nbsp;码：
<input type="password" id="pwd">
<br>
<span style="font-size: 14px;">记住用户名密码：</span>
<input type="checkbox" id="remember">
<!--

js部分

const username = document.getElementById('username');
const pwd = document.getElementById('pwd');
const remember = document.getElementById('remember');
remember.onclick = function() {
    if (remember.checked && username.value.length > 0 && pwd.value.length > 0) {
        localStorage.setItem('username', username.value);
        localStorage.setItem('pwd', pwd.value);
    } else {
        localStorage.removeItem('username');
        localStorage.removeItem('pwd');
    }

}
// 设置默认值
if (localStorage.getItem('username')) {
    username.value = localStorage.getItem('username');
    pwd.value = localStorage.getItem('pwd');
    // 复选框为默认选中状态
    remember.checked = true;
}

小案例：删除

功能：

	    1.获取用户输入的用户名和年龄
		 
		2.创建tr节点，tr节点创建4个td节点

	    3.第一个td节点显示编号，第二个td节点中插入文本节点，用户名 以此类推。第四个插入 一个删除按钮

		4.4个td节点插入到tr中，tr插入到tbody中。

		5.删除按钮可以实现删除功能。

html部分

<style>
    div {
        text-align: center;
    }
    table {
        width: 640px;
        border: 1px solid gray;
        border-collapse: collapse;
        margin: 50px auto;
    }
    thead tr {
        background: #ccc;
    }
    th,
    td {
        width: 160px;
        line-height: 35px;
        border: 1px solid gray;
        text-align: center;
    }
</style>
</head>
<body>
    <div>
        <label for="">用户名：</label>
        <input type="text" id="txt1">
        <label for="">年龄：</label>
        <input type="text" id="txt2">
        <button id="btn">添加</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="box">
            </tbody>
        </table>
    </div>
</body>

js部分

<script>
    // var data = [{
    //   id: 1,
    //   username: "小王",
    //   age: 34
    // }, {
    //   id: 2,
    //   username: "小红",
    //   age: 40
    // }];
    // 写一个空数组
    let pop = []
//编号
var btn = document.getElementById("btn");
//单击事件
btn.onclick = function() {
    //获取用户名
    var index = pop.length + 1;
    var txt1 = document.getElementById("txt1")
    var username = txt1.value;
    //获取年龄
    var txt2 = document.getElementById("txt2")
    var age = txt2.value;
    //把添加按钮添加的所有信息都拿到放到一个新对象中
    var ppp = {
        index: index,
        username: txt1.value,
        age: txt2.value,
    }
    //每次一单击都是一个新对象然后把新对象添加给pop中
    pop.push(ppp);
    //把当前数据存储到 localstorage中
    localStorage.setItem("info1", JSON.stringify(pop));

    initTr(index, username, age)
}
var tbody = document.getElementById("box")
//生成一个单元行。
function initTr(id, username, age) {
    //创建tr节点，创建4个td节点
    var tr = document.createElement("tr");
    var str = `
<td>${id}</td>
<td>${username}</td>
<td>${age}</td>
<td>
<button class="del">删除</button>
</td>`
    tr.innerHTML = str;
    //获取删除按钮
    var delBtn = tr.querySelector(".del");
    //给按钮绑定点击事件
    delBtn.onclick = function() {
        //找到当前行  tr 删除
        delBtn.parentNode.parentNode.remove();
    }
    //tr插入到tbody中。
    tbody.appendChild(tr);
}
//判断
if (localStorage.getItem("info1")) {
    // let strr= localStorage.getItem("info1");
    //把储存的数据json转换一下 复制给pop 调用单元行函数 添加新单元
    pop = JSON.parse(localStorage.getItem("info1"))
    for (let k = 0; k < pop.length; k++) {
        initTr(pop[k].index, pop[k].username, pop[k].age)
    }
}
   </script>