油猴 使用localstorage

### 如何在油猴脚本中使用 `localStorage` 进行数据存储

#### 使用场景说明
`localStorage` 是一种用于持久化存储少量数据的方式，在浏览器关闭后仍然存在。这使得即使用户重新启动浏览器或计算机，之前保存的信息也不会丢失[^1]。

#### 数据存入实例
当希望将某些配置项或者其他重要信息长期保持下来时，可以利用如下方式将其写入 `localStorage`：

// 将数组转换成JSON字符串并保存至名为'tableColsArr'的位置
localStorage.setItem('tableColsArr', JSON.stringify(strArr));
// 同样处理另一个变量 'cssSelectorArr'
localStorage.setItem('cssSelectorArr', JSON.stringify(cssSelectorArr));

上述代码片段展示了如何通过调用 `setItem()` 方法来设置键值对；其中第一个参数是要创建的键名，第二个则是对应的值。这里特别注意的是对于复杂类型的对象（如数组），应该先序列化为字符串形式再进行存储[^2]。

#### 获取已存数据的方法
为了读取出先前已经储存在 `localStorage` 的资料，可采用下面这种方式：

let tableColumnsArray = JSON.parse(localStorage.getItem('tableColsArr'));
let selectorsCollection = JSON.parse(localStorage.getItem('cssSelectorArr'));

此部分运用了 `getItem()` 函数指定要检索的具体键名称，并返回相应的值作为字符串。由于最初是以 JSON 字符串的形式保存下来的复合型结构体（比如列表），所以现在需要用 `JSON.parse()` 来反序列化还原原始形态以便后续操作。

#### 展示 Local Storage 内容于网页上
如果想要直观查看这些被记录下的条目，则可以通过编写一段简单的 HTML 和 CSS 结合 JavaScript 动态构建表格视图展示出来。例如可以在油猴脚本里加入这样的逻辑：

function showLocalStorageTable() {
    let modal;
    
    // 若已有显示则移除旧有模态框
    if (modal) {
        document.body.removeChild(modal);
        modal = null;
        return; // 终止函数继续运行
    }
}

该段落仅提供了框架性的开头，实际应用还需要补充更多细节以完成整个功能模块的设计[^3]。