检查 HTML 5 存储支持

function supportLocalStorage() {
  var test = 'test';
  try {
    // 尝试使用 setItem 方法设置本地存储
    localStorage.setItem(test, test);
    // 如果 setItem 方法成功，则使用 removeItem 方法移除名为 test 的值
    localStorage.removeItem(test);
    return true;
  } catch (e) {
    return false;
  }
}

对于很多 API 来说，特定的浏览器可能只支持其部分功能，但是因为 Web Storage API 非常小，所以它已经得到了相当广泛的支持，不过出于安全考虑，即使浏览器本身支持 Web Storage ，用户仍然可自行选择是否将其关闭。

从安全性考虑，所有浏览器下的 session 数据都是不允许跨域访问的，跨子域也是不允许的。其它方面主流浏览器中的实现较为一致。

localStorage 的常用方法

localStorage 和 sessionStorage 对象拥有相同的属性和方法，也具有相同的操作：

设置和获取数据

window.sessionStorage.setItem('myFirstKey', 'myFirstValue');

需要注意以下 3 点

• 实现 Web Storage 的对象是 window 对象的子对象，因此 window.sessionStorage 包含了开发人员需要调用的函数
• setItem 方法需要一个字符串类型的键和一个字符串类型的值来作为参数。虽然 Web Storage 支持传递非字符数据，但是目前浏览器可能还不支待其它数据类型
• 调用的结果是将字符串 myFirstKey 设置到 sessionStorage 中，这些数据随后可以通过键 myFirstKey 获取

获取数据

获取数据需要调用 get Item 函数。

alert(window.sessionStorage.get Item('myFirstKey'));

可以使用点语法设置数据，使用这种方法，可完全避免调用 setItem 和 getItem ，而只是根据键值的配对关系，直接在 sessionStorage 对象上设置和获取数据。

window.sessionStorage.myFirstKey = 'myFirstValue';
alert(window.sessionStorage.myFirstKey);

JavaScript 允许开发人员设置和获取几乎任何对象的属性，那么为什么还要引入 sessionStorage 对象？其实，二者之间最大的区别在于作用。只要网页是同源的（包括规则、主机和端口），基于相同的键，就都能够在其它网页中获得设置在 sessionStorage 上的数据。在对同一页面后续多次加载的情况下也是如此。大部分开发者对页面重新加载时经常会丢失脚本数据，但通过 Web Storage 保存的数据不再如此了，重新加载页面后这些数据仍然存在。

有时候，一个应用程序会用到多个标签页或窗口中的数据，或多个视图共享的数据。在这种情况下，比较恰当的做法是使用 HTML5 Web Storage 的另一种实现方式 localStorage 。 localStorage 与 sessionStorage 用法相同，唯一的区别是访问它们的名称不同，分别通过 localStorage 和 sessionStorage 对象来访问。二者在行为上的差异主要是数据的保存时长及其共享方式。

localStorage 数据的生命周期要比浏览器和窗口的生命周期长，同时被同源的多个窗口或者标签页共享；而 sessionStorage 数据的生命周期只在构建它们的窗口或者标签页中可见。

获取或更新

使用 length 属性获取 key/value 对的数量后，可以使用 key() 方法根据索引号获取键名，该方法的语法格式如下：

ojb_Storage.key(index);

参数 index 用来指定索引号，其值为 0 〜 ojb_Storage.length-1 之间的一个数字。如果索引号超出范围，那么将抛出"不适合的参数"异常。

该方法的返回值是一个字符串，表示该索引位置的键名，也可以是空字符串。

注意，新增加键后，键的索引位置会发生变化。

在获取键后，使用 getItem() 方法可以获取键对应的值，该方法的语法格式如下：

ojb_Storage.getItem(sKey);

参数 sKey 是一个字符串，用于指定要获取的键，也可以是空字符串。该方法返回一个字符串，如果指定的键不存在，那么返回 null 。例如下面的代码用于遍历所有键：

var oStorage;
try {
  // 获取存储区域
  oStorage = window.localStorage
    ? window.localStorage
    : window.globalStorage[strDomain];
  for (var i = 0; i < oStorage.length; i++) {
    var strKey = oStorage.key(i);
    console.log(strKey + '=' + oStorage.getItem(strKey));
  }
} catch (err) {
  alert(err.message ? err.message : err.toString());
}

注意，不能从不安全 URL 环境（ HTTP ）中读取和写入安全环境（ HTTPS ）内定义的键。

清除文件

使用 clear() 方法可以清除所有 key/value 对。

sessionStorage 存储将会被立即删除， localStorage 存储也将会被从内存中立即删除，分配给它的存储空间也将被清除。

例如下面的代码演示了删除前后存储空间的变化：

// 定义当前域
var oStorage;
try {
  // 获取存储区域
  oStorage = window.localStorage;
  alert(oStorage.remainingSpace);
  oStorage.clear();
  alert(oStorage.remainingSpace);
} catch (err) {
  alert(err.message ? err.message : err.toString());
}

该范例仅可以在 IE 浏览器中执行，因为它使用了 IE 特有的属性 remainingSpace ，该属性不是 W3C 规范所规定的，其它浏览器不支持。

清除指定的键

使用 removeItem() 方法可以删除指定的键 / 值对，该方法的语法格式如下：

ojb_Storage.removeItem(sKey);

参数 sKey 是一个字符串，用于指定要删除的键，也可以是空字符串。

下面的代码也可以清除所有键 / 值对：

var oStorage;
try {
  //获取存储区域
  oStorage = window.localStorage
    ? window.localStorage
    : window.globalStorage[strDomain];
  // 遍历所有键，根据键删除所有键 / 值对
  for (var i = 0; i < oStorage.length; i++) {
    var strKey = oStorage.key(i);
    oStorage.removeItem(strKey);
  }
} catch (err) {
  alert(err.message ? err.message : err.toString());
}

添加新键和更新键值

使用 setItem() 方法可以添加新键和更新键值，该方法首先检查指定的键是否存在，如果存在就更新键值；如果不存在就增加一个新键。

该方法的语法格式如下：

ojb_Storage.setItem(sKey, sValue);

参数 sKey 是一个字符串，用于指定要添加或更新的键，也可以是空字符串。

参数 sValue 是一个字符串，用于指定键值。

该方法在 JavaScript 中也可以被实现为数组或对象，因此使用数组或对象语法也可以完成同样的目标。例如下面的语法是完全相同的：

window.sessionStorage.setItem('myKey', '... ');
window.sessionStorage['myKey'] = '';
window.sessionStorage.myKey = '';

注意，不能从不安全 URL 环境（ HTTP ）中读取和写入安全环境（ HTTPS ）内定义的键。

如果键值的大小超出了存储区域允许的大小，那么就会抛出 Out of memory 异常，因此在应用该方法之前最好使用 remainingSpace 属性检测存储空间。 remainingSpace 属性是 IE 特有的属性，不是 W3C 规范所规定的。

Web Storage 不但支持使用 setItem() 、 getItem() 等方法执行存取操作外，也支持使用点号或字符串数组 [] 的方式进行存储数据。

var storage = window.locationStorage;
storage.key1 = 'hello';
storage['key2'] = 'world';
console.log(storage.key1);
console.log(storage['key2']);