Web前端数据存储

Cookie

　　会跟随每次请求附加到请求header上，大小限制4k。

　　部署对象： document.cookie

　　构成： Key-Value

　　有效期：根据expires配置

　　可选项：

• • ;path=path (例如 '/', '/mydir') 如果没有定义，默认为当前文档位置的路径。
  • ;domain=domain (例如 'example.com'， '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义，默认为当前文档位置的路径的域名部分。
  • ;max-age=max-age-in-seconds (例如一年为60*60*24*365)
  • ;expires=date-in-GMTString-format 如果没有定义，cookie会在对话结束时过期
  • ;secure (cookie只通过https协议传输)

　　API：　　　　

• • docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
  • docCookies.getItem(name)
  • docCookies.removeItem(name[, path],domain)
  • docCookies.hasItem(name)

Local Storage

　　大小5M/Domain

　　部署对象：window.localStorage

　　构成：Key-Value

　　存储内容格式：字符串

　　有效期：永久存储/手动删除

 　　常见场景：请求缓存(ajax)

　　优缺点：跨浏览器会话；不能跨域共享

　　API：

• • getItem //取记录
  • setIten//设置记录
  • removeItem//移除记录
  • key//取key所对应的值
  • clear//清除记录　

 

Session Storage

　　有效期：页面会话结束即被清除

　　　　注意：页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话。

　　其余同Local Storage

 

IndexedDB

  　大小：根据浏览器不同，250M以上

　　基于事务的本地数据存储

　　部署对象：window.indexedDB

　　构成：对象仓库（object store）存储

　　内容格式： 接近NoSQL数据库，二进制

　　优点：同域限制，使用索引迅速定位数据，提高搜索速度

　　

refers：

https://www.cnblogs.com/LuckyWinty/p/5699117.html

http://web.jobbole.com/88241/

 

转载于:https://www.cnblogs.com/full-stack-engineer/p/8824488.html