【无标题】JavaScript中的数据存储

JavaScript中数据存储

cookie

cookie的构成

名称：一个唯一确定cookie的名称
值：储存在cookie中的字符串值
域：cookie对于哪个域是有效的
路径：指定域中的指定路径
失效时间：cookie何时应该被删除的时间戳
安全标志：指定后，cookie只有在使用SSL连接时才发送到服务器（设置secure标志）

cookie的限制

1、绑定在特定域名下，无法跨域
2、浏览器对cookie数量的限制不同
3、所有cookie的累加长度限制为4KB，超长会被忽略

JS中的cookie document.cookie

获取：返回当前页面可用的所有cookie的字符串，由分号和空格隔开的一系列名（值对）
添加：cookie的值必须写成key=value的形式，且等号两边不能有空格
写入时必须对分号、逗号和空格进行转义
一次只能写入一个cookie，并且写入不是覆盖，而是添加
cookie的属性：value必需项，用于指定cookie的值
expires指定cookie过期时间
domain指定cookie所在域名
path属性 指定路径，必须是绝对路径
secure指定cookie只能在加密协议https下发送到服务器
httpOnly设置该cookie不能被JS读取

localStorage

window.localStorage 本地存储，存储的数据没有过期时间
语法：myStorage = localStorage; 返回一个Storage对象
添加：localStorage.setItem(‘key’,‘value’);
获取：localStorage.getItem(‘key’);
移除：localStorage.removeItem(‘key’);
清空：localStorage.clear();不接收参数，清空存储对象里的所有数据。
注：各浏览器支持的localStorage容量上限不同。

sessionStorage

window.sessionStorage 会话存储，存储的数据会在浏览器会话结束时被清楚(浏览器关闭)
my.sessionStorage 本地存储，存储的数据没有过期时间
语法：myStorage = sessionStorage; 返回一个Storage对象
添加：sessionStorage.setItem(‘key’,‘value’);
获取：sessionStorage.getItem(‘key’);
移除：sessionStorage.removeItem(‘key’);
清空：sessionStorage.clear();不接收参数，清空存储对象里的所有数据。
注：各浏览器支持的sessionlStorage容量上限不同。

三者的区别

cookie存储量小，受到限制，前后端自动同步
localStorage存储量大，需手动删除
sessionStorage临时存储，关闭浏览器自动清除