js插件store（本地存储）

时间：2025-01-19 08:25:59

是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。 会根据浏览器自动选择使用 localStorage、globalStorage 或者 userData 来实现本地存储功能。


一 存储接口

通过 $. 调用。检测是否支持（开启） LocalStorage

 Copy 
var store = $.;

if (!) {
  alert('Local storage is not supported by your browser. Please disable "Private Mode", or upgrade to a modern browser.');
  return;
}

var user = ('user');
// ... and so on ...

Safari 的无痕浏览模式或者用户禁用了本地存储时， 将返回 false。

二 浏览器如何禁用 LocalStorage：

  • Firefox： 地址栏输入 about:config, 将  的值设置为 false；
  • Chrome: 设置 → 隐私设置 → 内容设置 → 阻止网站设置任何数据。

三 接口列表

LocalStorage 受同源策略限制，以下操作仅限于同源下的数据。

  • (key, val): 存储 key 的值为 val；
  • (key): 获取 key 的值；
  • (key): 移除 key 的记录；
  • (): 清空存储；
  • (): 返回所有存储；
  • (): 遍历所有存储。
 Copy 
var store = $.;

// 存储 'username' 的值为 'marcus'
('username', 'marcus')

// 获取 'username'
('username')

// 移除 'username' 字段
('username')

// 清除所有本地存储
()

// 存储对象 - 自动调用 
('user', { name: 'marcus', likes: 'javascript' })

// 获取存储的对象 - 自动执行 
var user = ('user')
alert( + ' likes ' + )

// 从所有存储中获取值
(). == 'marcus'

// 遍历所有存储
(function(key, val) {
  console.log(key, '==', val)
})

四 浏览器支持

绝大多数浏览器（包括 IE 8）都原生支持 LocalStorage。

你的浏览器测试结果为：

second pass bad assert: getAll gets all 4 values

不同浏览器对本地存储单条记录的长度限定不同，具体可以通过以下链接测试：

  • Web Storage Support Test
  • Test of localStorage limits/quota

五 注意事项

原生方法与 的差异

使用原生方法操作：

 Copy 
 = 24
 !== 24 // true
 === '24' // true

 = { name: 'marcus', likes: 'javascript' }
 === "[object Object]" // true

 = ['javascript', 'localStorage', '']
 === 32 // true
 === "javascript,localStorage," // true

使用 序列化后的结果:

 Copy 
('myage', 24)
('myage') === 24 // true

('user', { name: 'marcus', likes: 'javascript' })
alert("Hi my name is " + ('user').name + "!") // 仍然返回对象

('tags', ['javascript', 'localStorage', ''])
alert("We've got " + ('tags').length + " tags here") // 仍然返回数组


相关文章