本地数据存储(客户端存储)

本地数据存储(客户端存储)

本地存储数据分为四种方式:

1.cookie

2.webStorage

3.Flash存储:借助Flash播放器

4.IndexedDB

webStorage

提供了通过浏览器存储键/值对,以更直观的方式比使用cookie机制

特点

1.客户端存储数据技术,本地存储

2.每个存储源不能大于10MB

3.包括localStorage,sessionStorage

优点:

1.存储数据量大

2.不会随http请求一起发送

缺点:

1.在浏览器的隐私模式下不能读取

2.本质是在读写文件,写入数据量大的话会卡(FF是将localstorage写入内存中的)

3.不能被爬虫读取

局限性

多数浏览器提供了隐身/私密模式,这与本地存储的使用存在根本矛盾,为防止用户禁用本地存储,在使用本地存储前应对使用环境进行校验,检查本地存储功能是否可用

localStorage,sessionStorage公有API

setItem

type: Function

target: 设置/修改指定存储键值对

param: {String} [key] (required) 存储数据别名,用于获取/清除/修改数据的唯一识别码

param: {String} [valie] (required) 值

return {Undefined}

getItem

type: Function

target: 获取指定存储键值对

param: {String} [key] (required) 存储数据别名,用于获取/清除/修改数据的唯一识别码

return {String || Null} 值

removeItem

type: Function

target: 清除指定存储键值对

param: {String} [key] (required) 存储数据别名,用于获取/清除/修改数据的唯一识别码

return {Undefined}

clear

type: Function

param: null

target: 清除所有存储键值对

return {Undefined}

key

type: Function

param: {Number} [index] (required) 存储数据别名按字母排序后的序列值

return {String || Null} 获取key

length

type: Attribute

target: 获取storage存储数据总数量

return {Number} 存储数据个数

localStorage,sessionStorage异同点

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

cookie

特点

1.生命周期只在设置的cookie过期时间内有效,即使窗口或浏览器关闭。

2.存放数据大小为4K左右且有个数限制(各浏览器不同),一般不能超过20个。

3.与服务器端通信:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题。

4.Cookie需要程序员自己封装,源生的Cookie接口不太友好

优点:极高的扩展性和可用性

1.通过良好的编程,可控制cookie保存对象的大小。

2.通过加密和安全传输技术,减少cookie被破解的可能性。

3.控制cookie的生命周期,使之不会永远有效。这样的话偷盗者很可能拿到的就是一个过期的cookie。

缺点

1.cookie的长度和数量的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB。否则会被截掉。

2.安全性问题。如果cookie被人拦截,那个人就可以获取到所有session信息。

3.有些状态不能保存在客户端。例如,为了防止重复提交表单,我们需要在服务端保存一个计数器。若吧计数器保存在客户端,则起不到什么作用。

你可能感兴趣的:(前端那点事)