2.10 cookie-storage

最新推荐文章于 2024-02-28 20:29:26 发布

贾国鹏

最新推荐文章于 2024-02-28 20:29:26 发布

阅读量116

点赞数

文章标签： cookie

本文链接：https://blog.csdn.net/jiaguopeng/article/details/113483781

版权

本文详细介绍了前端存储中的Cookie和Storage的使用。通过示例代码展示了如何进行Cookie的添加、读取和删除，以及Storage的读写与删除操作。同时，解释了Storage的长期与临时存储特性，并探讨了数据传输到后台的方法。

摘要由CSDN通过智能技术生成

2.10 cookie-storage

在这里插入图片描述

1. cookie示例

<%--
  Created by IntelliJ IDEA.
  User: JAVASM
  Date: 2020/12/4
  Time: 10:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>

        /*
        * cookie操作
        * 写操作
        *  document.cookie = "jscook3=jsvalabc;path=/;expires="+new Date("2021-11-11 11:11:11");
        *
        * 读操作
        *  var cks = document.cookie
        *  忽略掉无用cookie  有格式的字符串
        *  jscook=jsval6; jscook2=jsval6; jscook3=jsvalabc
        *
        *  如果要读取指定cookie的值
        * 需要拆分遍历cookie字符串
        *
        * 删除cookie  设置同名 同path expires设置为已过期时间
        *  document.cookie = "jscook3=jsvalabc;path=/;expires="+new Date("过期时间");
        *
        *
        * */

        $(function(){
            $("#addckBtn").click(function(){
                //通过js操作cookie
                document.cookie = "jscook3=jsvalabc;path=/;expires="+new Date("2021-11-11 11:11:11");
            })
            $("#getckBtn").click(function () {
                var cks =  document.cookie;
                console.log(cks);

                var ckarr = cks.split("; ")

                $.each(ckarr,function(i,d){
                    var keyAndVal = d.split("=");
                    var ckkey = keyAndVal[0]
                    var ckval = keyAndVal[1]
                   // console.log(ckkey+"   "+ckval);

                    if($("#ckkeyText").val()==ckkey){
                        console.log(ckval);
                    }

                })
            })
            $("#delckBtn").click(function(){
                document.cookie = "jscook3=jsvalabc;path=/;expires="+new Date("1990-11-11 11:11:11");
            })
        })
    </script>
</head>
<body>
    <input id="addckBtn" type="button" value="添加cookie">
    <input id="getckBtn" type="button" value="读取cookie">
    <input id="ckkeyText" type="text">
    <input id="delckBtn" type="button" value="失效cookie">
</body>
</html>

2.storage示例

<%--
  Created by IntelliJ IDEA.
  User: JAVASM
  Date: 2020/12/4
  Time: 11:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        /*
        * Storage存储      纯前端存储  不会自动发送到服务器
        * 可以通过url参数拼接 或者放在表单的 input type="hidden" 中 传输到后台
        *localStorage     长期存储
        *sessionStorage   关闭浏览器就清除
        *
        *
        * 读
        *localStorage.key
        *localStorage.getItem("key")
        * 写
        * localStorage.key = value;
        * localStorage.setItem("key","value");
        *删除
        * localStorage.removeItem("key");
        *
        *
        * */
        $(function(){
            $("#addsgBtn").click(function(){
                localStorage.testkey = "abc123";
                sessionStorage.testkey = "abc123";
                localStorage.setItem("testkey2","fffff");
            })
            $("#getsgBtn").click(function () {
                console.log(localStorage.testkey2) ;
                console.log(localStorage.getItem("testkey2"));
            })
            $("#delsgBtn").click(function(){
                localStorage.removeItem("testkey2");
            })
            $("#sendDataBtn").click(function(){
                location.href= "demo1?mykey="+localStorage.testkey;
            })
        })
    </script>

</head>
<body>
    <input id="addsgBtn" type="button" value="添加storage">
    <input id="getsgBtn" type="button" value="读取storage">
    <input id="sgkeyText" type="text">
    <input id="delsgBtn" type="button" value="失效storage">
    <input id="sendDataBtn" type="button" value="发送数据">
</body>
</html>