JS实现本地存储信息的方法(基于localStorage与userData)

以下是JS实现本地存储信息的方法(基于localStorage与userData)的完整攻略：

1. localStorage

1.1 localStorage基本介绍

localStorage是HTML5新增的一种客户端存储数据的方法，可以存储的数据大小约为5MB，存储的数据没有过期时间限制，只有用户手动清空缓存时才会被清除。localStorage使用key-value键值对的方式存储数据。

1.2 localStorage的使用方法

在使用localStorage时，我们需要根据key来获取value、设置value、删除value等操作。

获取数据

let value = localStorage.getItem(key);

设置数据

localStorage.setItem(key, value);

删除数据

localStorage.removeItem(key);

下面是一个示例：

// 设置数据
localStorage.setItem('name', '张三');

// 获取数据
let value = localStorage.getItem('name'); // value的值为"张三"

// 删除数据
localStorage.removeItem('name');

2. userData

2.1 userData基本介绍

userData是IE浏览器专属的本地存储数据方式，可以存储的数据大小也有限制，存储数据的大小约为64KB，存储的数据没有过期时间限制，只有用户手动清空缓存时才会被清除。userData使用XML文件的方式存储数据。

2.2 userData的使用方法

userData的使用方法相对较为复杂，需要对IE的userData进行初始化、获取数据、设置数据、保存数据等操作。

初始化

document.documentElement.addBehavior("#default#userData");

获取数据

let userData = document.documentElement.userData;
let value = userData.getAttribute(key);

设置数据

userData.setAttribute(key, value);

保存数据

userData.save("userData");

下面是一个示例：

// 初始化
document.documentElement.addBehavior("#default#userData");

// 设置数据
let userData = document.documentElement.userData;
userData.setAttribute('name', '张三');

// 保存数据
userData.save("userData");

// 获取数据
let value = userData.getAttribute('name'); // value的值为"张三"

// 删除数据
userData.removeAttribute('name');
userData.save("userData");

综合来说，localStorage比userData更加方便、简单，而且兼容性更好，但是对于要兼容IE浏览器的网页，可以考虑使用userData。