store.js的使用 -- 本地存储localStorage的封装插件

发表于 | 分类于

store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。使用store,js简化了使用localStorage原生方法的操作。本文主要介绍如何用store.js操作localStorage。

本地存储localstorage

localstorage 是 HTML5 提供的在客户端存储数据的新方法，主要作用是将数据保存在客户端中，并且数据是永久保存的，除非人为干预删除。
localstorage 的局限
1、只有版本较高的浏览器中才支持 localstorage
2、localStorage只能存储字符串，使用 JSON 时需转换
3、如果存储内容过多会消耗内存空间，导致页面变卡，因为localStorage本质上是对字符串的读取

store.js

Github地址

store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。
使用store,js简化了使用localStorage原生方法的操作。

store.js的使用

  1. 首先引入store.min.js插件:

    1
    <script src="https://cdn.bootcss.com/store.js/1.3.20/store.min.js"></script>

  2. 判断浏览器是否支持本地存储

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script type="text/javascript">
        init();
        function init(){
            if(!store.enabled){
                alert("你的浏览器不支持本地存储，请使用更高版本的浏览器");
                return;
            }else{
                ......
                }
     </script>

  3. 开始愉快地使用store.js吧~
    store.js的基本API有：

    1
    2
    3
    4
    5
    6
    store.set(key, val)  //存储 key 的值为 val；
    store.get(key)  //获取 key 的值；
    store.remove(key) //移除 key 的记录；
    store.clear()  //清空存储；
    store.getAll() //返回所有存储；
    store.forEach() //遍历所有存储。

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
store.set('username', 'marcus')  
store.get('username')  
store.remove('username')  
   
store.clear()  
   
store.set('user', { name: 'marcus', likes: 'javascript' })  
   
var user = store.get('user')  
alert(user.name + ' likes ' + user.likes)  
   
// Get all stored values  
store.getAll().user.name == 'marcus'  
   
// Loop over all stored values  
store.forEach(function(key, val) {  
    console.log(key, '==', val)  
})

  • set 单个存储字符
    格式：store.set(key, data[, overwrite]);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    store.set('name','mavis'); //存储name的值为 mavis
    store.set('name','angel');  //将name的值存储为angel
    例如：
    store.set('容器1', json)
    ```  
    在控制台显示  
    ![](https://sfault-image.b0.upaiyun.com/282/193/2821938934-5831460c5a712)  
    ---
    - get 获取存入的key值  
    格式：`store.get(key[, alt]);`    
    get获取时，有时需要判断是否存在localStorage
    ```javascript
    store.set('name','mavis');
    store.set('name','angel');
    store.get('name');  //angel
    例如：
    var json = {1:1,2:2,3:3,4:4};
    store.set('容器1', json)
    store.get('容器1');//{1:1,2:2,3:3,4:4}
  • remove 移除key的记录
    1
    store.remove('name');

在控制台可以看到name的值已经被移除

  • store.clear(); 清空所有本地存储
  • getAll 从所有存储中获取值
    格式：store.getAll() 
    1
    2
    store.set('name','mavis');
    store.getAll().user.name == 'mavis';   //true
  • forEach 遍历所有的值 
    1
    2
    3
    4
    5
    store.set('user',{name:'mavis',likes:'javascript'}); // 存储对象 - 自动调用 JSON.stringify
    var user = store.get('user'); // 获取存储的对象 - 自动执行 JSON.parse
    store.forEach(function(key, val) {
                      console.log(key, '==', val)
                })  // 遍历所有存储

  • store.has(key)
    ``javascript
    console( store.has(‘容器1’) );//true
    console( store.has(‘容器2’) );//false
    ```

在浏览器中查看LocalStorage的方法

F12打开开发人员工具→Application→Storage→LocalStorage

-------------本文结束感谢您的阅读-------------