json字符串,本地存储讲解localstorage 和 sessionstorage及cookie,模板字符串初识

江河i

已于 2022-08-04 14:19:06 修改

阅读量1.3k

点赞数

分类专栏： Js 文章标签： json javascript 前端

于 2021-01-21 20:09:28 首次发布

本文链接：https://blog.csdn.net/z18237613052/article/details/112859037

版权

Js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

这里写目录标题

json字符串

“abc123truelkgsjhgo” 普通字符串

"<h1>hgahgo</h1>" html格式字符串

键值对格式键和值都需要用双引号去包括
‘“name”:“yasuo”’

json用途：
在网络传输时使用。比如前后端交互。
不能够传输对象和数组的。
只能通过字符串形式去传输数据。

json对象： json对象是一种轻量级的数据交换格式；

json对象严格的语法格式：键必须使用双引号进行包裹, 如果值是字符串类型，也必须是双引号

json格式的使用方法

JSON.parse()
把json格式的字符串转为js中的数组或对象

JSON.stringify()
把js中的数组或对象转为json字符串

对象：
‘{“属性名”:“属性值”,“属性名2”:“属性值2”,“属性名3”:“属性值3”}’

 var str ='{"name":"亚索","age":"28","skill":"狂风绝息斩"}'//josn格式的字符串
        var  str2=  JSON.parse(str);
        console.log(str2);/ 转为了js中的对象{name: "亚索", age: "28", skill: "狂风绝息斩"}
        console.log(typeof str2);// object

数组：
1.存储数组不是对象。

        var obj = [1,2,3,4]
        var  str=JSON.stringify(obj);
        console.log(str);// 为josn字符串  '[1,2,3,4]'

2.存储数组为对象

 var array = [{
                name: "亚索",
                age: "28",
                skill: "狂风绝息斩"
            },
            {
                name: "劫",
                age: 20,
                skill: "瞬狱影杀阵"
            }
        ]
        var  str2=JSON.stringify(array);
        console.log( str2);//转为josn字符串 '[{"name":"亚索","age":"28","skill":"狂风绝息斩"},{"name":"劫","age":20,"skill":"瞬狱影杀阵"}]'

数字和布尔值可以不用带双引号

对象在转json字符串时，函数会被自动过滤掉。

 var obj = {
            name: "亚索",
            age: "28",
            skill: "狂风绝息斩",
            fn:function(){
                console.log("我是函数");
            }
        }
      var str= JSON.stringify(obj);
       console.log(str);//转为join字符串   '{"name":"亚索","age":"28","skill":"狂风绝息斩"}'

parse() 这个方法会新创建一个对象或数组

var obj = {
            name: "亚索",
            age: "28",
            skill: "狂风绝息斩"
        }
        var str = JSON.stringify(obj);//转为join字符串
        var obj2 = JSON.parse(str);//转为js字符串     parse() 这个方法会新创建一个对象或数组
        obj2.name="虞姬";
        console.log( obj);//  原对象内容不变  {name: "亚索", age: "28", skill: "狂风绝息斩"}
        console.log( obj2);// 因为新创建了所以 {name: "虞姬", age: "28", skill: "狂风绝息斩"}*/

 var parson={
        name:"张三",
        age:"18"
        }
       var parson2=parson;
      //将person指向的地址赋值给person2这个变量
       parson.name="李四";
       console.log( parson);//     对象 {name: "李四", age: "18"}*

当转换错误时
错误信息：语法错误
VM14:1 Uncaught SyntaxError(语法错误): Unexpected token 亚 in JSON at position 8

对象的深拷贝狭义实现

// 对象的深拷贝： 简单粗暴的方式  利用 JSON.parse() 和 JSON.stringify()
    let obj = {
            name: '李四',
            child: {
                name: '张三'
            }
        }
        //JSON.stringify将对象转为转为join字符串,然后parse()转为js中的对象
        //因为 parse() 这个方法会新创建一个对象或数组
    let res = JSON.parse(JSON.stringify(obj))
    console.log(res);
    res.child.name = 'hello'
    console.log(obj);

在这里插入图片描述

localstorage 和 sessionstorage的区别

Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对
共同点：
都是将数据存储在本地中
只能存储字符串
区别：
localstorage 永久存储的除非手动删除
sessionstorage 会话缓存
会话结束时失效
1.代码控制结束
2.浏览器关闭/窗口关闭

 //将数组存储到sessionStorage本地存储-----用法一样
     var session = window.sessionStorage;   
            session.setItem("name","yasuo");
            session["age"]="18";
            session.wo="hello";//这是将数组写入存储的三种方法
    //-------------------------------------------------------------------
            console.log(session.getItem("name"));//yasuo
            // session.removeItem("name")//删除
            // session.clear()//清除全部

还记得有一次使用 localStorage 存储了个数组，却一直显示为 [object，object]

解决办法：

存储对象

window.localStorage.setItem('名称', JSON.stringify(对象数据))

获取对象

let content = JSON.parse(localStorage.getItem('名称'))

删除本地指定存储

sessionStorage.removeItem('你那个叫的名字')   //localStorage也都一样

删除本地所有存储

localStorage.clear();   // sessionStorage也一样

cookie

vue 中使用 vue-cookie超链接

用来存储浏览器端的本地数据
特点：
1.按照域名来存储的
不同的域名下的cookie数据不共通。
2.有存储的路径
127.0.0.1:8080/a/b.html cookie /a/b /
127.0.0.1:8080/b/b.html cookie /b/b
打开方式
在这里插入图片描述

3.cookie 存储的数据格式
“键1=值1;键2=值2”

4.存储大小
4KB 50条左右
5.时效性：
默认是会话级别
我们可以手动设置cookie的过期时间
6.操作权限
前端可以操作
后端可以操作
7.发送请求时，cookie中的数据会被自动传输到后端

8.cookie只能在域名环境下才可以使用

使用方法：

增（写入）
document.cookie = “键=值”;
增加时一次只能增加一条
查（读取）
document.cookie
一次时获取cookie中的所有内容
改
同一域名下
相同名字时，后者会覆盖掉前者
document.cookie = “键=新值”;
删
没有删除方法，有过期时间
如果要删除，则将该数据的有效期设置为过期即可。

有效期设置：

document.cookie = “键=值;expires=”+日期;

服务器的时间以格林威治事件为准的

toUTCString() 转换为格林威治时间

<script>
        //增------------- 增加时一次只能增加一条
        document.cookie = "num=yase";//
        document.cookie="age=18";
        document.cookie="ji=kuang";
        //查----------------------一次时获取cookie中的所有内容
        console.log(document.cookie);// num=yase; age=18; ji=kuang  
        //改============================================
        document.cookie = "num=虞姬";
        //删------------------------没有删除方法，有过期时间
        //如果要删除，则将该数据的有效期设置为过期即可。
      
        //  document.cookie="num=yase;expires="+new Date("2021/01/20 06:46:50");
        // 服务器的时间以格林威治事件为准的,所以   现在的时间=现在-8小时
        //或者直接转为现在的时间         现在标准为new Date().toUTCString()
        //---------------------------------------------------
        document.cookie="box=zhangsan;expires="+new Date().toUTCString();
    </script>

设置cookie过期时间为现在减10秒

封装cookie函数

<script>
    /**
 * [setCookie 设置 cookie]
 * @author Michael An
 * @DateTime 2019-02-28T10:58:07+0800
 * @param    {[type]}                 name   [变量名，必选]
 * @param    {[type]}                 value  [变量值，必选]
 * @param    {[type]}                 exdays [过期日期，可选]
 */
function setCookie(name, value, exdays) {
  let cookie = name + "=" + value + ";";
  if (exdays) {
    let d = new Date();
   // d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
   d.setTime(d.getTime()+5*1000);
    console.log(d.toTimeString());
    let expires = "expires=" + d.toGMTString();
    cookie = cookie + ' ' + expires;
  }
  document.cookie = cookie;
}
 
/**
 * [getCookie 获取 cookie]
 * @author Michael An
 * @DateTime 2019-02-28T10:58:12+0800
 * @param    {[type]}                 cname [变量名，必选]
 * @return   {[type]}                 [返回值：变量值（字符串）]
 */
function getCookie(cname) {
  let name = cname + "=";
  let cookie = document.cookie.split(';');
  for(let i = 0, len = cookie.length; i < len; i++) {
    let c = cookie[i].trim();
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
 
/**
 * [checkCookie 查询 cookie]
 * @author Michael An
 * @DateTime 2019-02-28T10:58:16+0800
 * @return   {[type]}       [如果有cookie就显示欢迎界面，没有cookie就设置当前用户的信息]
 */
function checkCookie() {
  let username = getCookie("username");
  if (username != "") {
    alert("Welcome again " + username);
  }
  else {
    username = prompt("Please enter your name:","");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}
 setCookie("username", "张三", 0.1)
getCookie("username")
checkCookie()
</script>

设置,获取,删除cookie优秀封装–博客链接
以下为课堂|||||||
这小段是为cookie的第三个参数过期时间做准备,要明白意思

<script>
    /效果:  得到时间( 当前的时间减去8个小时,当前的秒数加3s)      
    var exDate = new Date();//获取当前北京时间
   exDate.setHours(exDate.getHours() - 8);//设置    小时减8小时
    exDate.setTime(exDate.getTime() + 1000 * 3);//设置秒数
    console.log(exDate);
</script>

    <!-- 
        设置cookie

        name 
        value
        expires 
     -->
    
</head>

<body>

</body>
<script>
    /**
    * name  键
      value 值
      expires 过期时间   单位：s
    */
    function setCookie(name, value, expires) {
       //setCookie函数的作用,   参数放入cookie历史记录
        if (expires == null) {
            document.cookie = name + "=" + value;
        } else {
            var exDate = new Date();
            exDate.setHours(exDate.getHours() );//设置    小时减8小时
            exDate.setTime(exDate.getTime() + 1000 * expires);//设置秒数     
            document.cookie = name + "=" + value + ";expires =" + exDate;
        }
    }
    // key 键  作用:获取历史记录的值
   function getCookie(key) {
        if (document.cookie.length > 0) {
            var arr = document.cookie.split(";");
          // console.log(arr);["age=18","name=yasuo"]
            for (var i = 0; i < arr.length; i++) {
                var t = arr[i].trim().split("=");
               // console.log(t);["name","yasuo"]
                if (t[0] === key) {
                    return t[1];
                }
            }
        }
        return "";
    }
    setCookie("name", "yasuo");
   setCookie("age", "18");
    console.log(getCookie("name"));//yasuo
</script>

模板字符串初识

模板字符串
ES6之前，拼接字符串使用 +
ES6之后，一种新的字符串定义方式。 ``(反引号) 英文状态下，tab上方那个键位 ‘’
区别：
1.普通字符串不可以换行的模板字符串可以换行，且输出时，换行仍有效

2.单引号与双引号不能在字符串中解析变量
模板字符串可以解析${}中的变量

3.兼容性
低版本IE不兼容

 <script>
        var ming="李四";
     //普通字符串拼接 -------------------------换行要+ 
        console.log("我的"+
        "名字是"+
         "ming"+"是最强王者");
   //模板字符串-------------------------------
         console.log(
         `我的名字是${ming}
         是最强
         王者`);      
    </script>

在这里插入图片描述

江河i

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
json字符串,本地存储讲解localstorage 和 sessionstorage及cookie,模板字符串初识

json字符串“abc123truelkgsjhgo” 普通字符串"<h1>hgahgo</h1>" html格式字符串键值对格式键和值都需要用双引号去包括‘“name”:“yasuo”’json用途：在网络传输时使用。比如前后端交互。不能够传输对象和数组的。只能通过字符串形式去传输数据。所以说我们如果要传输对象和数组，我们需要将其转换为字符串。json格式就是满足对象和数组数据结构的一种字符串json的使用方法JSON.parse()把json格式
复制链接

扫一扫