本地存储(Local storage)是在浏览器本地存储应用数据的好途径。相比较cookie拥有更大的存储空间(相同域下一般达到5M存储空间),使用更灵活,而且不会在每次提交中发送到服务器。几乎所有浏览器都支持本地存储,甚至包括IE8。

ZUI中提供读写本地存储的插件。

实例

本地存储可用,刷新页面或关闭浏览器不会丢失你的数据。

本地存储不可用!

索引 名称
名称

如何使用

要使用本地存储,直接使用$.zui.store对象。store提供了一系列方法来操作本地存储数据。

以下列出store对象提供的属性和方法:

属性或方法 说明 参数和要点
store.enable 属性,指示本地存储是否可用
  • 如果浏览器不支持本地存储,则该值为false
  • 即便浏览器支持本地存储,但该值被手动设置为false,则无法通过store对象进行本地存储相关操作(原生localStorage不影响)。
store.slience 属性,默认值为true 当该值为true时,本地存储不可用时进行存储和读取值时不抛出异常。
store.storage 属性,返回浏览器原生localStorage对象
store.length() 方法,返回本地存储条目数量 即使本地存储不可用时也会返回0。
store.remove(key) 移除指定的条目 参数:
  • key:需要移除的条目的名称。
store.get(key) 获取存储条目的值

参数:

  • key:存储条目的名称。

与原生的getItem方法不同,该方法会进行反序列化操作,返回类型为存储的值的原类型。

store.set(key, value) 设置存储条目的值

参数:

  • key:存储条目的名称。
  • value:可选,存储条目的名称,如果该值为null或者缺省,则会移除之前存储的值。

与原生的setItem方法不同,该方法会进行序列化操作,所有value可以为任意类型,但不能是函数或者对象属性包含函数。

store.key(index) 根据索引获取存储条目的名称 参数:
  • index:条目索引,为自然数。
store.forEach(callback) 遍历所有存储条目 参数:
  • callback:遍历函数,该函数提供两个参数,第一个参数为当前遍历条目的名称,第二个参数为值。
store.serialize(value) 将一个任意类型的值序列化为字符串 参数:
  • value:需要序列化的值。
store.deserialize(value) 将一个字符串反序列化为值或对象。 参数:
  • value:需要反序列化的字符串。
store.getAll() 获取所有存储的条目

返回一个对象,该对象的属性和对应的属性值记为存储的条目。

store.removeItem(key) 方法store.remove()的别名写法 参数:
  • key:需要移除的条目的名称。
store.getItem(key) 获取指定名称的条目值

该方法相当于localStorage.getItem(key),获取的值永远是序列化之后的字符串。

参数:

  • key:条目名称。
store.setItem(key, value) 设置存储的值

该方法相当于localStorage.setItem(key, value)

参数:

  • key:存储的名称
  • value:存储的值

代码示例

$.zui.store.set('name', 'catouse');                      // 使用本地存储设置'name'值为'catouse'
$.zui.store.set('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储

console.log($.zui.store.get('name'));                    // 从本地存储获取'name'的值
console.log($.zui.store.get('date').year);               // 从本地存储获取'date'值的year属性

$.zui.store.forEach(function(key, value)                 // 遍历所有本地存储的条目
{
    console.log(value);
});

console.log($.zui.store.key(0));                         // 获取本地存储第一个条目的名称

$.zui.store.remove('name');                              // 从本地存储移除‘name’的值
$.zui.store.clear();                                     // 清空所有本地存储的条目

本地页面存储

很多时候,不同页面相同名称的条目的值需要分别保存。store对象提供了一系列方法和属性来读写同一页面(相同路径)的条目。

属性或方法 说明 参数和要点
store.page 属性,当前页面存储的数据对象
  • 该对象的属性或对应的值即为对应的条目。
  • 这些属性都可以读写,如果进行了更改操作,需要调用store.pageSave()方法来存储到本地。如果将属性设置为null,则会在下次调用pageSave()时移除该属性。
store.pageGet(key) 获取当前页面指定名称的值 参数:
  • key:指定条目的名称。
store.pageSet(key,value) 设置值 参数:
  • key:名称
  • value:值
store.pageClear() 清除当前页面所有存储的条目
store.pageRemove(key) 移除当前页面存储的指定条目 参数:
  • key:指定条目的名称。
store.pageSave() 立即保存当前页面存储的条目到本地存储 一般情况下不需要调用此方法,除非手动更改store.page属性。

代码示例

/* 以下操作的键值仅针对当前页面 */
$.zui.store.pageSet('name', 'catouse');                      // 使用本地存储设置'name'值为'catouse'
$.zui.store.pageSet('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储

console.log($.zui.store.pageGet('name'));                    // 从本地存储获取'name'的值
console.log($.zui.store.pageGet('date').year);               // 从本地存储获取'date'值的year属性

$.zui.store.pageRemove('name');                              // 从本地存储移除‘name’的值
$.zui.store.pageClear();                                     // 清空所有本地存储的条目