本地存储(Local storage)是在浏览器本地存储应用数据的好途径。相比较cookie拥有更大的存储空间(相同域下一般达到5M存储空间),使用更灵活,而且不会在每次提交中发送到服务器。几乎所有浏览器都支持本地存储,甚至包括IE8。
ZUI中提供读写本地存储的插件。
本地存储(Local storage)是在浏览器本地存储应用数据的好途径。相比较cookie拥有更大的存储空间(相同域下一般达到5M存储空间),使用更灵活,而且不会在每次提交中发送到服务器。几乎所有浏览器都支持本地存储,甚至包括IE8。
ZUI中提供读写本地存储的插件。
索引 | 名称 | 值 | |
---|---|---|---|
名称
值
|
要使用本地存储,直接使用$.zui.store
对象。store
提供了一系列方法来操作本地存储数据。
以下列出store对象提供的属性和方法:
属性或方法 | 说明 | 参数和要点 |
---|---|---|
store.enable |
属性,指示本地存储是否可用 |
|
store.slience |
属性,默认值为true |
当该值为true 时,本地存储不可用时进行存储和读取值时不抛出异常。 |
store.storage |
属性,返回浏览器原生localStorage 对象 |
|
store.length() |
方法,返回本地存储条目数量 | 即使本地存储不可用时也会返回0。 |
store.remove(key) |
移除指定的条目 |
参数:
|
store.get(key) |
获取存储条目的值 |
参数:
与原生的 |
store.set(key, value) |
设置存储条目的值 |
参数:
与原生的 |
store.key(index) |
根据索引获取存储条目的名称 | 参数:
|
store.forEach(callback) |
遍历所有存储条目 | 参数:
|
store.serialize(value) |
将一个任意类型的值序列化为字符串 | 参数:
|
store.deserialize(value) |
将一个字符串反序列化为值或对象。 | 参数:
|
store.getAll() |
获取所有存储的条目 |
返回一个对象,该对象的属性和对应的属性值记为存储的条目。 |
store.removeItem(key) |
方法store.remove() 的别名写法 |
参数:
|
store.getItem(key) |
获取指定名称的条目值 |
该方法相当于 参数:
|
store.setItem(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.pageGet(key) |
获取当前页面指定名称的值 | 参数:
|
store.pageSet(key,value) |
设置值 | 参数:
|
store.pageClear() |
清除当前页面所有存储的条目 | |
store.pageRemove(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(); // 清空所有本地存储的条目