localStorage/sessionStorage/cookie

html5本地存储主要有两种localStorage和sessionStorage

都是使用相同api,存入后都是字符串类型

localStorage和sessionStorage使用方法:

1.setItem(key,value) 存储数据

2.getItem(key) 获取数据

3.removeItem(key) 删除某一个缓存数据

4.clear() 清空所有缓存数据

5.key(index) 根据下标来获取存储字段

cookie:

test=test:就是存储的值和对应的名字 Max-Age=3600 就是过期时间1个小时

获取就是console.log(document.cookie);

localStorage、sessionStorage、cookie注意点：

1.只能存储字符串，所以对象、数组、函数的储存需要转化字符串

使用JSON.stringify(value);存将对象转化为字符串格式；

使用JSON.parse(value);将字符串格式转化为对象；

2.本地存储只能针对同源策略，其他不是同源的标签页面不能获取当前标签页的缓存

3.性能与存储的大小无关，减少读取item的次数就能提高性能，所以多存少读，就能提高新能

localStorage：

1.没有储存时间限制，关闭浏览器还是会保存数据；

2.容量2~5Mb左右

sessionStorage：

1.关闭浏览器时清空数据；

2.各个浏览器不一，个别浏览器没有上限；

cookie:

1关闭浏览器数据不清空，

2可设置过期时间

3.无论是服务端设置的还是客服端设置的，都会在请求头里带上cookie

4.有大小限制，最好不超过4000字节

indexedDB使用方法：

是html5的数据库：也是一种存储方法

1.创建数据库

注意：版本号只能升，不能降，不然创建不成功

用法：

2.在数据库创建"表"

注意：1.必须在版本号升级中触发，才可以建表

2.创建时，还有一个参数，有两种方式可以配置存放key的值

方法1：

方法2：

3.存数据的方法add(data)(前提：创建时必须配置存key的方式)

模式有两种：readwrite读写和readonly只读;

获取数据：get(key); getAll()//获取所有数据

修改数据：put(data); 既可以修改，也可以新增;也有回调事件同获取

以keyPath:id存储为例：如果表存在id:1004则是修改，不存在则是新增；

删除数据：delete(key);也有回调事件同获取

全部删除:clear();也有回调事件同获取

4.索引：

是key的升级版，有时候不想用系统的key,就可以使用索引，自定义key

创建时：createIndex(表，自定义的key,是否唯一)

获取时：

就可以通过index(表名字).get(自定义key)来获取值

5.游标：store.openCursor() 就是范围遍历

1.IDBKeyRange.only();查询唯一

2.IDBKeyRange.upperBound(),小于等于输出，如果有true,就只是小于

cursor.update({数据})更新某项值,cursor.delete({数据})删除数据

3.IDBKeyRange.lowerBound(),大于等于输出，如果有true,就只是大于

用法同上。。。。

4.IDBKeyRange.bound(n,m,true,true)

//参数1就是大于等于n，

//参数2就是小于等于m，

//参数3控制参数1，为true只大于，

//参数4控制参数2，为true只小于

6.索引+游标的好处：

索引按值搜索+游标范围遍历

巴特西

localStorage/sessionStorage/cookie

localStorage和sessionStorage使用方法:

cookie:

localStorage、sessionStorage、cookie注意点：

indexedDB使用方法：

最新文章

热门文章