存储JS变量和画布数据的另一种方式，用户可以稍后检索

alternative way to store JS vars and canvas data that user can retrieve later?

本文关键字：用户 方式 另一种 检索 变量 JS 布数据 数据 存储      更新时间：2023-09-26

我有一个画布元素，用户可以在上面绘制许多对象。目前，对象定位信息存储在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，让用户存储简单的变量信息和画布数据信息，这些信息可以稍后检索和重新绘制？顺便说一句，画布todaull信息只能以这种方式使用，因此它可以通过formmail脚本传递到我的电子邮件中。

尝试本地存储。这正是您所需要的，并在此处进行了记录。诀窍是，如果你想支持旧的浏览器，你需要回到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');
}
相关文章：