Question

我有一个用户绘制许多对象的canvas元素。目前，对象定位信息存储在JS变量中：

object1Xposition = 235;
object1Yposition = 30;

object1Xscale = 100;
object1Yscale = 110;

object1rotation = 22.5;

......等等。在某些时候，用户单击按钮将所有定位信息保存到cookie：

createCookie('CCobj1Xpos',object1Xposition,.01);
createCookie('CCobj1Ypos',object1Yposition,.01);
createCookie('CCobj1Xscale',object1Xscale,.01);

稍后，用户返回页面以将cookie加载回：

var a = readCookie('CCobj1Xpos');
var b = readCookie('CCobj1Ypos');
var c = readCookie('CCobj1Xscale');

我还设置了canvas.toDataURL也保存到cookie的位置。所有这一切都运行正常，但我担心文件大小，因为可能有太多的对象信息适合cookie。我知道4K很可能是标准。是否有另一种方法，仅使用HTML和Javascript，用户存储简单的变量信息和画布数据信息，可以在以后检索和重绘？顺便说一句，canvas todataurl信息只能以这种方式使用，因此可以通过formmail脚本传递给我的电子邮件。

Answer 1

尝试本地存储。它正是您所需要的，并且已经记录了here。诀窍在于，如果您想支持旧浏览器，则需要回退到cookie。此外，localstorage值存储为字符串，需要转换回您的数据类型。

存储数据的示例：

if(typeof(Storage) !== "undefined") {
    localStorage.CCobj1Xpos = object1Xposition;
} else {
    createCookie('CCobj1Xpos',object1Xposition,.01);
}

检索数据：

var a = null;
if(typeof(Storage) !== "undefined") {
    a = Number(localStorage.CCobj1Xpos);
} else {
    a = readCookie('CCobj1Xpos');
}

存储用户以后可以检索的JS变量和画布数据的替代方法？

1 个答案: