2021-05-11

客户端存储

cookie

最初用于在客户端存储会话信息。要求服务器在响应HTTP请求时，通过发送set-CookieHTTP头部包含会话信息

javascript中处理cookie只有BOM的document.cookie属性。基本操作有读、写、删除，删除也是不能直接删除，需要再次设置同名cookie，并将过期时间设置为过去的某个时间。

所有cookie都会作为请求头部由浏览器发送给服务器，所以在cookie中保存大量信息可能会影响特定域浏览器请求的性能。因此尽可能让cookie只保存必要信息。

浏览器存储API

Web Storage的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。

Web Storage包含localStorage和sessionStorage，其中localStorage是永久存储机制，数据会保存到通过JavaScript删除或者用户清除浏览器缓存，不受页面刷新影响，也不会因为关闭窗口、标签页、或者重启浏览器而丢失；sessionStorage是跨会话的存储机制，意味着数据只会存储到浏览器关闭。

当storage对象发生变化时，会触发storage事件，可以采用以下代码监听：

window.addEventListener("storage",(event)=>
  alert('Storage changed for ${event.domain}')
);

其中domain是存储变化对应的域。

indexedDB

indexedDB是类似于MySQL或者Web SQL Database的数据库，与传统数据库最大的区别是，indexedDB采用对象存储而不是表格数据。

调用indexed.open()可以打开已经存在的数据库，如果不存在则会创建并打开新创建的数据库，返回一个IDBRequest的实例，在实例上添加onerrr和onsuccess事件处理程序。

let db,request,version=1;//指定版本号，只能是整数
request=indexedDB.open("admin",version);
request.onerror=(event)=> alert(`Failed to open:${event.target.errorCode}`);
request.onsuccess=(event)=>{
  db=event.target.result;
}
//两个事件处理程序的event.target都指向request

对象存储是通过定义键然后添加数据来创建的，（有待补充）

限制：indexedDB数据库是与页面源（协议、域、端口）绑定，因此信息不可以跨域共享。且每个源都有可以存储的空间限制。

总结

有了以上这些存储手段，就可以在客户端通过使用JavaScript存储可观的数据，但由于这些数据都没有加密，因此要注意不能用于存储敏感信息。