[ExtJS] store与localstorage

最新推荐文章于 2026-04-23 07:07:36 发布

原创最新推荐文章于 2026-04-23 07:07:36 发布 · 5.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ExtJS #Localstorage #proxy.Localstorage #ExtJS本地存储 #ExtJS6

ExtJS 专栏收录该内容

55 篇文章

订阅专栏

本文介绍了ExtJS框架中使用本地存储Ext.data.proxy.LocalStorage的方法。通过创建store并指定localStorage为代理，详细阐述了数据添加过程，包括store.sync()如何在localStorage中存储数据。同时，提到了在将服务器数据导入localStorage时需要注意避免使用'id'作为关键字，并提供了解决方案。

ExtJS框架中，Store的代理方式有多种

像是Ajax,内存代理memory，本地代理localstorage、sessionStorage等

这里主要介绍下使用本地数据Ext.data.proxy.LocalStorage

==============================================================================================

1.创建一个store,指定下代理为localstorage

Ext.define('Store名',{
    extend:'Ext.data.Store',
    fields: ["ids", "name", "age"],//注意此ids不能为id关键字
    proxy: {
        type: 'localstorage',
        id  : 'items'
    }
})

这里的id就是浏览器里localstorage的key值

一般是以 key-序号作为key

2.为store增添数据

store.add(数据对象);
store.sync();//保存数据 进行这步操作，浏览器的localstorage里才会刷新

注意:

使用store.sync()时，ext内置处理机制会为localstorage增添三种值

第一个：id-序号：增添的数据

第二个：id：1，2，3...n

第三个：id-counter:总条数 (非必须)

ForExample

我们执行了一次

store.add({name: "张s", age: 22 });
store.sync();

这里的items就是我们proxy里配置的id的value

若是，再操作一次 localstorage就有两条

==============================================================================================

若是，想让把服务器里的数据data，付给localstorage

可以使用for循环

for(var i=0;i<data.length;i++){
  store.add(data[i])
}
store.sync();

注意：

data数据里不要有id这个关键字！！

若项目返回的数据恰好是id这个key，在fields里用convert

例如我们执行

store.add({id:xx,name:'Tom',age:20}); //使用了id关键字
store.sync();

发现，localstorage并无变化

而当我们不使用关键字id

store.add({name:'Tom',age:20}); //不使用关键字id
store.sync();

保存成功