保存整数和变量的 HTML5 本地存储答案

【问题标题】：HTML5 Local Storage with saved integers and variables保存整数和变量的 HTML5 本地存储
【发布时间】：2013-07-19 10:56:31
【问题描述】：

我正在尝试实现一个功能，使用户能够保存使用我已经创建的静态变量的数学公式，并使用本地存储保存它们。然后脚本从本地存储中获取该公式，进行数学运算并将结果显示在表格中。

我把所有东西都安排妥当了，除了抓取部分；因为 localStorage.getItem() 返回一个字符串，用 parseFloat()/parseInt() 转换它只返回第一个整数或 NaN。这两种情况都会破坏预期的结果。

有什么方法可以从 localStoage 中获取包含整数和变量的对象？

这是一个应该有效的公式示例，由 5 个 localStorage.getItem() 请求获取。

avgFrags*250
avgDmg*(10/(avgTier+2))*(0.23+2*avgTier/100)
avgSpots*150
log(avgCap+1,1.732)*150
avgDef*150

有什么想法或替代方案吗？

编辑：

每一行代表一个getItem()请求的输出；

form_frag = localStorage.getItem('formula_frag');
form_dmg = localStorage.getItem('formula_dmg');
form_spot = localStorage.getItem('formula_spot');
form_cap = localStorage.getItem('formula_cap');
form_def = localStorage.getItem('formula_def');

【问题讨论】：

标签： javascript jquery html local-storage

【解决方案1】：

localStorage 存储在键值存储中，其中每个值都被推送到字符串。如果您确定您正在处理“整数”，则可以将字符串推送到一个数字：

var avgFrags = +localStorage.getItem('avgFrags'); // The + infront pushes the string to number.

我不确定我是否理解您的问题。

(+"123") === 123

【讨论】：

【解决方案2】：

如果您事先知道变量名称，则可以使用Function() 轻松地将字符串转换为函数。第一个参数是你的函数参数，最后一个是你的函数体。

var func1 = Function('avgFrags', 'return avgFrags * 250;');

这相当于：

function func1(avgFrags) {
    return avgFrags * 250;
}

已知函数签名

如果您知道本地存储中的每个项目将使用哪些变量名，那么您应该很容易使用函数做您想做的事情：

// from your edited question
form_frag = localStorage.getItem('formula_frag');
form_dmg = localStorage.getItem('formula_dmg');

// ... create functions

var fragsFunc = Function('avgFrags', form_frg );
var dmgFunc = Function('avgDmg', 'avgTier', form_dmg );

// ... get frags

var frags = fragsFunc (10); // frags = 2500; // if sample in storage

未知函数签名

现在，如果您的变量名数量有限，并且您不知道每个函数将使用哪些变量名，那么您可以执行以下操作：

var avgFrags, avgDamage, avgTier, avgSpots, avgCap, avgDef;

// ... get from storage

form_frag = localStorage.getItem('formula_frag');
form_dmg = localStorage.getItem('formula_dmg');

// ... create functions

var fragsFunc = Function('avgFrags', 'avgDamage', 'avgTier', 'avgSpots', 'avgCap', 'avgDef', form_frag);
var dmgFunc = Function('avgFrags', 'avgDamage', 'avgTier', 'avgSpots', 'avgCap', 'avgDef', form_frag);

// ... get frags, only the first argument is used, but we don't know that.

var frags = fragsFunc (avgFrags, avgDamage, avgTier, avgSpots, avgCap, avgDef); // frags = 2500; // if sample in storage

您可以通过将一个变量传递给函数来简化此操作，该变量是一个对象，其中包含可以传递给函数的所有参数。只需确保函数编写器使用该对象即可。

var settings = { 
    avgFrags: 10, 
    avgDamage: 50,
    // ...
};

var fragsFunc = Function('s', 's.avgFrags * 250');

var frags = fragsFunc (settings);

使用正则表达式获取部件

我假设上述内容将完成工作，您并不真的想要一个具有变量名称、数字和运算符的对象。

如果您只需要变量名和数字（和运算符），您可以使用正则表达式。

([a-z_$][\w\d]*)|([0-9]*\.?[0-9]+)|([^\w\d\s])

您可以使用它为每个部分创建一个数组。每个部分也被分组，所以你知道哪个是变量名，哪个是数字，哪个是另一个（括号或运算符）

var re = /(\w[\w\d]*)|([0-9]*\.?[0-9]+)|([^\w\d\s])/g,
    match,
    results;

while ((match = re.exec(localStorage.getItem('formula_frag'))) {
    results.push({
        text: match[0],
        type: (match[1]) ? 'var' | (match[2]) ? 'number' : 'other'
    })
}

您可以使用 REY 查看带有示例数据的正则表达式的输出。

【讨论】：

谢谢你的想法，我看看能不能用这个。

【解决方案3】：

是的，您可以在本地存储中设置对象

这是小提琴 - http://jsfiddle.net/sahilbatla/2z0dq6o3/

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

$(function() {
    localStorage.setObject('x', {1: 2, 2: "s"})
    console.log(localStorage.getObject('x'));
});

【讨论】：