javascript如何使用表单文本输入更新cookie-6ren

javascript如何使用表单文本输入更新cookie

转载作者：行者123 更新时间：2023-11-28 04:38:04

26

4

我有一个 javascript 程序，它使用 cookie 来保存用户名和最喜欢的项目，在我的示例中我使用 pet。 Html 页面将允许用户通过表单文本输入更新他们最喜欢的宠物，并在单击按钮时使用输入更新 cookie。不知道如何做到这一点...任何建议或帮助将不胜感激。

<html>

<body onload="checkCookie()">
        <header>
            Cookies
        </header>
        <br>

    <form>
    <br>
    Update favorite Pet:<br><br> <input type="text" name="fpet" id="fp"><br>
    <br>
    <button onclick="myUpdate()">Update</button>

    </form>
    <p>Favorite Pet:</p>
    <p id="uip"></p>
    <script>

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
        c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
    }
}
return "";
}

function checkCookie() {
var user=getCookie("username");
var pet=getCookie("fpet");
if (user != "") {
    alert("Welcome again " + user);
} else {
   user = prompt("Please enter your name:","");
   if (user != "" && user != null) {
       setCookie("username", user, 30);
   }
}
if (pet != "") {
    alert("Your favorite pet is " + pet);
} else {
   pet = prompt("Please enter your favorite pet:","");
   if (pet != "" && pet != null) {
       setCookie("fpet", pet, 30);
   }
}
document.getElementById("uip").innerHTML = pet;
}

</script>

</body>

</html>

最佳答案

你可以试试这个。当您从本地电脑运行它时，有时它无法工作。尝试将其托管在任何服务器或本地服务器上。

<html>

<body onload="checkCookie()">

    <header>Cookies</header>

    <br><br>
    Update favorite Pet:<br><br> <input type="text" name="fpet" id="fp"><br>
    <br>
    <button onclick="myUpdate()">Update</button>
    <p>Favorite Pet:</p>
    <p id="uip"></p>

    <script type="text/javascript">

        function myUpdate(){
          var updateFp = document.getElementById("fp").value;
          setCookie('fpet',updateFp,1);
          document.getElementById("uip").innerHTML = getCookie('fpet');
        }

        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

        function checkCookie() {
          var user = getCookie("username");
          var pet = getCookie("fpet");

          if (user != "") {
              alert("Welcome again " + user);
          } else {
             user = prompt("Please enter your name:","");
             if (user != "" && user != null) {
                 setCookie("username", user, 30);
             }
          }
          if (pet != "") {
              alert("Your favorite pet is " + pet);
          } else {
             pet = prompt("Please enter your favorite pet:","");
             if (pet != "" && pet != null) {
                 setCookie("fpet", pet, 30);
             }
          }
          document.getElementById("uip").innerHTML = pet;
        }

    </script>

</body>

关于javascript如何使用表单文本输入更新cookie，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44015805/

26

4

0

文章推荐： javascript - 如何在html5中单击 Canvas 上的网格来填充单元格

文章推荐： html - 垂直对齐图像旁边的文本，CSS 不起作用

文章推荐： javascript - js :using dateformat with google geochart(getformattedValue)?

cookies - Vue-Cookies : this. $cookies 未定义
在我的主要组件中，我有: mounted() { window.$cookie.set('cookie_name', userName, expiringTime); }, 这会产生以下错误:
cookies - Cookie 的最大大小是多少？每个网站的浏览器中可以存储多少个 Cookie？
我正在学习 cookie，并且我想知道在编写依赖 cookie 来存储状态的 Web 应用程序时浏览器的支持情况。对于每个域/网站，可以向浏览器发送多少个 Cookie，大小是多少？如果发送并存储
cookies - cookie less 域中的 cookie
我已经为我的站点设置了一个 cdn，并将其用于 css、js 和图像。网站只提供那些文件我的问题是 firefox 中的页面速度插件对于我的图片请求，我看到了一个 cookie Cookie fc
cookies - jMeter Cookie 管理器不存储所有 cookie
在阅读了 Internet 上的文档和帖子后，我仍然无法解决 jMeter 中的 Cookie Manager 问题。我在响应头中得到了 sid ID，但它没有存储在我的 cookie 管理器中。
cookies - Set-Cookie 是否包含多个 cookie？
我正在 Node.JS 中处理一些类似浏览器的 cookie 处理，想知道从 NodeJS and HTTP Client - Are cookies supported? 开始对这段代码进行扩展到什
cookies - Owin cookie 身份验证设置-cookie 未保存在浏览器中
我正在此堆栈上构建自托管 Web 服务器:欧文南希网络 API 2 我正在使用 Katana 的 Microsoft.Owin.Security.Cookies 进行类似表单的身份验证。我得到了 Se
cookies - 是否可以代表用户在我的网站上禁用第三方 cookie？
我有一个从另一个网站加载资源的网站。我已经能够确定: 第三方网站在用户的浏览器上放置 cookie。如果我在浏览器设置中禁用第三方 cookie，第三方网站将无法再在浏览器上放置 cookie。该
cookies - 编辑和查看 Cookie
关闭。这个问题是off-topic .它目前不接受答案。想改善这个问题吗？ Update the question所以它是 on-topic对于堆栈溢出。 9年前关闭。 Improve this q
cookies - cookie 的持久性
我正在使用 python mechanize 制作登录脚本。我已经读到 Mechanize 的 Browser() 对象将自动处理 cookie 以供进一步请求。我怎样才能使这个 cookie 持久
cookies - 是否可以在域和子域之间共享 cookie
我正在尝试在 www.example.com 和 admin.other.example.com 之间共享 cookie 我已经能够使其与 other.example.com 一起使用，但是无法访问子
cookies - 设置子子域可访问的跨子域 cookie？
我设置了一个域为 .example.com 的 cookie .它适用于我网站上的每个一级子域，应该如此。但是，它不适用于 n 级子域，即 sub.subdomain.example.com和 to
cookies - 保存时间最长的 cookies
我想让用户尽可能长时间地登录。我应该使用什么？普通 cookies 持久性 cookie 快闪 cookies ip地址 session 或这些的某种组合？最佳答案我认为 Flash cook
cookies - 互联网广告商如何使用第三方 Cookie？
如果给定的 Web 服务器只能读取其域内设置的 cookie，那么 Internet 广告商如何从其网络外的网站跟踪用户的 Web 流量？是否存在某种“supercookie”全局广告系统，允许广告
cookies - 我们可以为一个域设置多少个 cookie？
我知道一个 cookie 可以容纳多少数据是有限制的，但是我们可以设置多少个 cookie 有限制吗？最佳答案来自 http://www.ietf.org/rfc/rfc2109.txt Prac
cookies - 谷歌分析 Cookie
如果我拒绝创建 cookie，则在我的浏览器中创建名称为 __utma、__utmb 等的 cookie。我认为这个 cookie 是用于谷歌分析的。任何人都知道谷歌如何创建这个 cookie，即使浏
cookies - 环境之间的沙盒 Cookie
我有一个生产环境和一个登台环境。我想知道我是否可以在环境之间沙箱 cookie。我的设置看起来像生产 domain.com - 前端 SPA api.domain.com - 后端节点分期 sta
cookies - cookie 是如何工作的？
我想知道浏览器(即 Firefox )和网站的交互。当我将用户名和密码提交到登录表单时，会发生什么？我认为该网站向我发送了一些 cookie，并通过检查这些 cookie 来授权我。 cookie
cookies - 跨域 Cookie
我在两个不同的域中有两个网络应用程序 WebApp1 和 WebApp2。我在 HttpResponse 的 WebApp1 中设置 cookie。如何从 WebApp2 中的 HttpReque
cookies - Dartium没有在websocket握手上发送httpOnly cookie
我正在使用Dartium“Version 34.0.1847.0 aura(264987)”，并从Dart创建一个websocket。但是，如果不是httpOnly，我的安全 session cook
Javascript Cookie 代码不存储 cookie/读取空 cookie 值？
我从 Headfirst Javascript 书中获取了用于 cookie 的代码。但由于某种原因，它不适用于我的浏览器。我主要使用chrome和ff，并且我在chrome中启用了本地cookie。

首页

博学

6Ren·AI

商城

javascript如何使用表单文本输入更新cookie