Javascript 还原保存的画布总是会失败并出现错误

我有一个画布绘画应用程序，我正在使用鼠标点击绘制。很简单。mouseup上有一个监听器，它保存当前图形与getImageData的对比，并设置用户实际绘制的会话cookie。片段：

var canvasData;
function save () {
  // get the data
  canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
};

...

this.mouseup = function (ev) {
 if (tool.started) {
  tool.mousemove(ev);
  tool.started = false;
  save();
  document.cookie = 'redraw=true; path=/'
 }
};

function restore () {
  // restore the old canvas
  context.putImageData(canvasData, 0, 0);
};

var checking = readCookie('redraw')
if (checking) {
  restore();
};

我正在寻找的功能是让用户能够离开页面，返回页面，不缓存，让站点查看他们的cookie，读取图形，并使用putImageData绘制地图。片段：

var canvasData;
function save () {
  // get the data
  canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
};

...

this.mouseup = function (ev) {
 if (tool.started) {
  tool.mousemove(ev);
  tool.started = false;
  save();
  document.cookie = 'redraw=true; path=/'
 }
};

function restore () {
  // restore the old canvas
  context.putImageData(canvasData, 0, 0);
};

var checking = readCookie('redraw')
if (checking) {
  restore();
};

但当我尝试这样做时，我会在putImageData行上得到错误控制台，上面写着“图像损坏或被截断”和“TypeError:值不是对象”

当我尝试将画布保存到内存（保存到数据，绘制图像）时：

---

我得到了“NS\u错误\u不可用：组件不可用”和“访问属性'toString'的权限被拒绝”。有人知道我做错了什么吗？我会把它放在jsfiddle上，但在这种情况下，它不会起多大作用，所以。谢谢。

Cookie的大小太小，因此当您将数据存储到Cookie时，数据将被截断，超过了大约4KB的限制-这对于base64编码的图像（数据url）来说并不多

现代客户端（浏览器）支持更新的存储方法。您可以在主要浏览器中使用以下存储机制（请参阅各部分下的链接，了解哪个浏览器支持什么）：

将数据存储为键/值对。如果方便的话，可以将图像存储为数据Url或保存保存数据的数组

这个接口是同步的

（还有用于临时存储的

localSession

）

客户支持：

对于您描述的用法，此接口可能是最简单的（如果您经常存储，您可能更喜欢异步接口），例如：

localStorage[myKey] = 'myData';
var myData = localStorage[myKey];

稍微复杂一点，但您可以将数据存储为对象

这个接口是异步的

客户支持：

示例：

目前只支持Chrome；作为带有目录等的文件系统工作。在这里，你可以把所有的东西都存储为水滴

这个接口是异步的

客户支持：

示例：

官方已弃用，但仍在Safari和IIRC Opera等浏览器中使用（并将持续一段时间）。Chrome也支持，但不支持Firefox和IE

这个接口是异步的

客户支持：

示例：

旧版IE支持userData。该API在多个方面都有一定的局限性

cookie随每个请求一起发送到服务器，因此cookie越大，通信速度越慢。它们被限制为4KB

---

请注意，客户机可能会也可能不会要求用户允许在其计算机中存储某些接口的数据-通常是在您请求的数据超过5 mb（Web SQL，indexedDB）的情况下。但这取决于客户。对于某些用户来说，这可能会造成干扰，因此，让用户知道应用程序将首先要求这样做是一个好主意。

您在哪里将画布数据保存到cookie？根据问题中的代码，您只需保存值

redraw=true

。我不会将画布数据保存到cookie中。cookie只是用来确定页面是否将加载画布数据。Canvas数据正在作为getImageData/putImageData和var canvasData的一部分保存。但是您在哪里保存

canvasData

变量？你知道当页面被重新加载并且所有旧的变量值丢失时，脚本状态被清除了吗？我没有。我假设这两种方法都是持久的。你是说我应该将canvasData变量作为cookie传递，并将其用作存储和确定用户是否在页面上？如果JS变量是持久的，就根本不需要cookie：）在任何情况下，我怀疑cookie中包含的信息太多；我会调查insted。