在localStorage里面保存函数

表白：黑白圣堂血天使，天剑鬼刀阿修罗。 
讲解对象：/在localStorage里面保存函数
作者：融水公子 rsgz
===

现在想实现一个功能，就是localStorage里面保存函数。之前我是这么实现的

// 从localStorage加载数据
function loadDataFromLocalStorage(key) {
  const data = localStorage.getItem(key);
  return JSON.parse(data);
}
// 将你的代码封装在一个函数中
function executeCode_360() {
  // 1 打开网址
  window.location.href = 'http://www.360doc.com/edit/writeartnew.aspx';
  // 2. 等待页面加载完成后执行点击操作
  setTimeout(function() {
    var element = document.querySelector('span.toolbars_btn.b18.b18s.ui_c');
    if (element) {
      element.click();
    } else {
      console.log('无法找到指定的元素');
    }
  }, 2000);
  // 3. 在选择器中插入字符串
  window.addEventListener('load', function() {
    var textarea = document.querySelector('div.CodeMirror-lines > div > div:nth-child(1) > pre');
    if (textarea) {
      textarea.textContent = 'xxxxxxxxxxxxxxx';
    } else {
      console.log('无法找到指定的文本区域');
    }
  });
}
// 保存代码到localStorage
saveDataToLocalStorage('executeCode_360', executeCode_360);
// 检查本地存储中是否有保存的数据
var code_wirte_360 = loadDataFromLocalStorage('executeCode_360');
if (savedData) {
  // 如果有保存的数据，则执行之前的代码逻辑
  eval(code_wirte_360);
}

看起来代码是没有问题的 但是我执行的时候发现了问题

我通过下面的方式访问一下localStorage里面的所有键值对，你会发现executeCode_360键里面的值是空的，键里的值是undefined  这就说明我没有保存成功

for (let i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  var value = localStorage.getItem(key);
  console.log(`Key: ${key}, Value: ${value}`);
}

那么是什么原因导致没有保存成功呢？仔细思考了一下

我发现谷歌浏览器，并且没有限制对localStorage的访问，但无法将函数保存到localStorage中，可能是因为localStorage只能存储字符串类型的数据。

函数是JavaScript中的一种特殊类型，无法直接通过localStorage保存和读取。

要将函数保存到localStorage中，应该需要将函数转换为字符串，并在需要时再将其还原回函数。

如何将函数转化为字符串并且保存到localStorage呢？
可以使用Function.prototype.toString()方法将函数转换为字符串，然后使用Function构造函数或eval()函数将字符串转换回函数

var myFunc = function() {
  console.log("Hello, world!");
};

var funcString = myFunc.toString();  // 'function() {\n  console.log("Hello, world!");\n}'
localStorage.setItem('rsgz001',funcString)
localStorage.getItem('rsgz001');  // 'function() {\n  console.log("Hello, world!");\n}'

可以看到 运行起来是没有问题的，成功的将函数保存到localStorage

那么接下来一个很重要的问题，保存的函数字符串取出来了  怎么还原呢？就是说怎么执行这个取出来后的函数呢？

请参考我的下一篇文章：

localStorage里面保存函数如何执行

=== 

公众号：不浪仙人

谢谢大家的支持！可以点击我的头像，进入我的空间浏览更多文章呢。建议大家360doc[www.360doc.com]注册一个账号登录，里面真的有很多优秀的文章，欢迎大家的到来。
---