1. 客户端存储的主要形式包括: web 存储 cookieIE userData 离线 web 应用 web 数据库和文件系统 API;
2.web 存储: localStorage 和 sessionStorage
localStorage 和 sessionStorage 是 window 对象上定义的两个属性, 支持大容量数据存储这两个属性都代表同一个 Storage 对象 -- 一个持久化关联数组数组使用字符串来索引, 存储的值也是字符串形式的
localStorage 和 sessionStorage 的主要区别在于存储的有效期和作用域不同: 数据可以存储多长时间以及谁拥有数据的访问权
localStorage 存储的数据是永久性的, 除非 web 应用可以删除存储的数据或者用户通过设置浏览器配合来删除, 否则数据将一直留在用户的电脑上, 永不过期 localStorage 的作用域时限定在文档源级别的同源的文档间共享同样的 localStorage 数据, 可以互相读取对方的数据, 甚至可以覆盖对方的数据
sessionStorage 的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的一旦窗口或者标签页被永久关闭了, name 所有通过 sessionStorage 存储的数据都会被删除 sessionStorage 的作用域也是限定在文档源中的, 非同源文档间无法共享 sessionStorage, 并且, sessionStorage 的作用域还被限定在窗口中, 同源的文档渲染在不同的窗口中, 则他们拥有各自的 sessionStorage
相关的 API 和属性:
setItem(键, 值);
getItem(键, 值);
removeItem(键);
- clear();
- key(i);
- length ;
- 3.cookie
cookie 是一种早期的客户端存储机制, 只适合存储少量的文本数据, 任何以 cookie 形式存储的数据, 不论服务器端是否需要, 每一次 http 请求时都会把这些数据传输到服务器端 JavaScript 中使用 cookie 不会采用任何加密机制, 因此他们是不安全的但是通过 http 来传输 cookie 数据是安全的在大多数浏览器中, 可以通过检测 navigator.cookieEnable 这个属性来判断 cookie 是否启用
cookie 默认的有限期很短暂, 它只能持续在 web 浏览器的会话期间, 一旦用户关闭浏览器, cookie 保存的数据就丢失了它的整个有限期和浏览器进程而不是单个浏览器窗口的有效期一致可以通过设置 max-age 属性来设置 cookie 的有效期
cookie 的作用域时通过文档源和文档路径来确定的, 该作用域通过 cookie 的 path 和 domain 属性也是可以设置的, 默认情况下, cookie 和创建它的 web 页面有关, 并对该页面以及和该页面同目录或者子目录的其他 web 页面可见
cookie 的 secure 属性, 一个布尔值, 用来表明 cookie 的值以何种形式通过网络
要给当前的文档设置默认有效期的 cookie 值, 只需要将 cookie 属性设置为一个字符串形式的值:
document.cookie="vesersion="+encodeURIComponent(value);
读取 cookie 的时候采用 decodeURIComponent() 函数进行解码为了更好地查看 cookie, 一般都会采用 split() 方法将 cookie 中的名值对都分离出来
每个 cookie 保存的数据不能超过 4KB, 数量限制从 20-300 不等
4. 利用 IE userData 持久化数据
IE5 以及 IE5 以上的浏览器通过在 document 元素后面附件一个专属的 Dhtml 行为来实现客户端存储
- var memory=document.creatElement('p');
- memory.id="memory");
- memory.style.display="none";
- memory.style.behavior="url('#default#userData')";
- document.body.appendChild(memory);
使用 getAttribute() 方法查询数据;
使用 setAttribute() 方法设置属性;
使用 removeAttribute() 方法删除数据;
默认情况下, 通过 userData 存储的数据, 除非手动删除, 否则永远不会失效, 可以通过设置 expires 属性来指定它的过期时间
IE userData 的作用域限制在和当前文档同目录的文档中 IE userData 允许存储的数据量比 cookie 大, 但是比 localStorage 和 sessionStorage 允许存储的数据量小
5. 应用程序存储和离线 web 应用
Application Cache:HTML5 引入了应用程序缓存, 这意味着 web 应用可以进行缓存, 并可以在没有因特网连接时进行访问, 带来了三个优势: 离线浏览 -- 用户可以在应用离线时使用它们; 速度 -- 已经缓存的资源加载更快; 减少服务器负载 -- 浏览器将只从服务器下载更新过或更改过的资源
所有主流浏览器均已支持应用程序缓存, 除了 IE;
如需启用应用程序缓存, 请在文档的
标签中包含 manifest 属性
每个指定了 manifest 的页面在用户对其访问时都会被缓存, 如果未指定 manifest 属性, 则页面不会被缓存, 除非在 manifest 文件中直接指定了该页面内
manifest 文件的文件扩展名建议为:.appcache 注意, manifest 文件需要配置正确的 MIME-type, 即: text/cache-manifest 必须在 web 服务器上进行配置
manifest 文件是简单的文本文件, 它告知浏览器被缓存以及不被缓存的内容 manifest 文件可分为三个部分:
CACHE MANIFEST: 在此标题下列出的文件将在首次下载后进行缓存;
NETWORK: 在比标题下列出的文件需要与服务器的连接, 且不会被缓冲;
FALLBACK: 在比标题下列出的文件规定当前页面五访问时的回退页面;
一旦应用被缓存, 它就会保存直到发生下列情况: 用户清空浏览器缓存; manifest 文件被修改, 更新注释行中的日期和版本号时一种使浏览器重新缓存的方法; 由程序来更新应用缓存
一旦文件被缓存, 则浏览器会继续展示已缓存的版本, 即使修改了服务器上的文件, 为了确保浏览器更新缓存, 需要更新 manifest 文件
来源: https://www.2cto.com/kf/201802/721917.html