Javascript 当用户输入达到一定大小时 cookie 不保存

Question

我正在尝试在卸载页面时将来自文本区域的用户输入保存在 javascript cookie 中，然后在用户 returns 时将其读回文本区域。我遇到的问题是当用户输入达到一定长度时 cookie 不会保存。它似乎适用于小字符串。

这里是 html:

<html>
<head>
<title>Cookie Test</title>
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body class="full" onload="GetCookies()" onunload="WriteCookies()">
    <div class="fullscreen-overlay" id="fullscreen_overlay">
  <div class="fullscreen-container js-fullscreen-container">
<div class="textarea-wrap">
  <textarea name="fullscreen-contents" id="fullscreen-contents"></textarea>
</div>
 </div>
</div>
</body>
</html>

Javascript:

function WriteCookies() {
        var d = new Date();
        var n = document.getElementById('fullscreen-contents').value;
        d.setDate(d.getDate() + 1);
        document.cookie = "mainCookie = " + n + "; expires = " + d.toGMTString() + "";
    }

    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 GetCookies() {
        document.getElementById('fullscreen-contents').value = getCookie('mainCookie');
    }

知道会发生什么吗？谢谢！

Answer 1

Cookie 的最大大小是 4093 bytes. Perhaps the long string is just eclipsing that limit. You could consider localStorage or sessionStorage 而不是

var text = document.getElementById('fullscreen-contents');

function saveText() {
  localStorage.savedText = text.value;
  console.log("saved");
}

function getText() {
  if (localStorage.savedText) {
    text.value = localStorage.savedText;
    console.log("loaded");
  }
}

已编辑：这是一个fiddle

Javascript 当用户输入达到一定大小时 cookie 不保存

Javascript cookie not saving when user input reaches a certain size

html

javascript

cookies

jquery