web客户端存储技术

cookie的优势能够与服务器共享状态，每次通过ajax请求的时候都会将cookie附带到请求的header，服务端能够直接读取到本地存储的数据。

成都创新互联公司专注于桐庐网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供桐庐营销型网站建设，桐庐网站制作、桐庐网页设计、桐庐网站官网定制、微信小程序服务，打造桐庐网络公司原创品牌,更为您提供桐庐网站排名全网营销落地服务。

GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: yummy_cookie=choco; tasty_cookie=strawberry

浏览器限制情况

cookie在chrome中将不在限制数据，但是超过header的允许大小将会报错

firefox限制30个

Opera第个域名限制50个

demo

为了简化操作，我所有的cookie的操作都采用js.cookie的库,有兴趣可以在github上面读源码。

方法名介绍　 Cookies.get(key) 获取本地key对应的值，不存在返回undefined Cookies.set(key,value) 将key的值设置成value Cookies.set(key,{}) 支持直接保存object值 Cookies.set(key1,key2,{}) 支持同时设置多个值 Cookies.remove(\'key\') 移除key的值 Cookies.getJSON(\'key\') 获取key的值，并且直接序列化成Object

Document

上面的demo用来记录当前客户端访问网站的次数

localStorage

localStorage和sessionStorage的接口是一致的，所以本章所有的案例可以直接改成sessionStorage.

方法名作用 localStorage.setItem(\'key\',\'val\') 将key设置成val localStorage.getItem(\'key\') 获取key的值 localStorage.removeItem(\'key\') 删除key的值 localStorage.clear() 删除所有的值 Demo 获取访问次数

Document

上面的作用是在本地存储一个以numHits的值，表示访问的次数

距离上次访问的时间

Document

上次的代码主要现实的三个功能:

如果初次访问输出welcome to the site

如果上次访问的时间超过２０天输出，welcome back to the site!

如果在２０天以内，输出:welcome good user

存储表单数据

localStorage实际上只能存储字符串数据，但是可以通过JSON.stringify和JSON.parse来存储Object对象。

Document

上面的demo主要是：

监听所有表单的输入事件,通过JSON.stringify()来将Object转换成字符串进行存储

进入网站时读取表单数据，如果存在着personForm的值就直接显示在页面上

点击提交按钮清空personForm数据

不同页面进行通信

有一次面试被问到如何实现几个标签的通信，下面的demo实际上就是做了这么一个工作。

Document

上面的demo我们打开两个页面，第一个页面输入内容，第二个页面就会触发window的storage事件，事件的参数originalEvent对象中的newValue和oldValue表示上次的值和当前的值。

兼容

if (!window.localStorage) { Object.defineProperty(window, "localStorage", new (function () { var aKeys = [], oStorage = {}; Object.defineProperty(oStorage, "getItem", { value: function (sKey) { return sKey ? this[sKey] : null; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "key", { value: function (nKeyId) { return aKeys[nKeyId]; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "setItem", { value: function (sKey, sValue) { if(!sKey) { return; } document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "length", { get: function () { return aKeys.length; }, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "removeItem", { value: function (sKey) { if(!sKey) { return; } document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; }, writable: false, configurable: false, enumerable: false }); this.get = function () { var iThisIndx; for (var sKey in oStorage) { iThisIndx = aKeys.indexOf(sKey); if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } else { aKeys.splice(iThisIndx, 1); } delete oStorage[sKey]; } for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/s*;s*/); nIdx < aCouples.length; nIdx++) { aCouple = aCouples[nIdx].split(/s*=s*/); if (aCouple.length > 1) { oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); aKeys.push(iKey); } } return oStorage; }; this.configurable = false; this.enumerable = true; })()); }

文章标题：web客户端存储技术
文章转载：http://cqcxhl.com/article/cjheje.html