详解 JavaScript 存储

javascript admin 129100 0 Comment

javascript用于存储的方式可谓是多种多样,善于应用‘存储’可以大大的提高网站的性能,博主结合日常开发常见需求做一下总结,希望对大家有用~

1.cookie

存储大小:   4kb左右,以20个为上限,
清理机制:  IEOpera 会清理近期最少使用的cookieFirefox会随机清理cookie
主要应用:   购物车,登录状态
缺陷:         同域内http请求都会带cookie,浪费带宽

cookie常见携带参数


2.localstorage

存储内容: 只要是能序列化成字符串的内容都可以存储,利用JSON.stringify();
存储大小: 5m
兼容性:    ie8+
主要应用:常用于ajax请求缓存
缺陷:      1. localstorage不被爬虫识别,所以不能用它完全取代url传參
               2. 不能跨域共享,所以不要用以存储业务关键信息,更加不要存储安全信息,(cookie可以通过window.name解决,但是localstorage不能)

常见应用:

  JSON.stringify(localStorage).length   可以查看当前使用了的大小,用5M减一下可以得出粗略的剩余大小(但是很不精确)

 

 

 

3.sessionstorage

sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。其他与localstorage一样。

4.离线缓存(application cache)

兼容性:   ie 9 +
主要应用:常用于静态资源缓存
存储大小:5m
缺陷:      由于原理上,application cache是把manifest上的资源一起下载下来,所以manifest里的内容不宜过多,数据量不宜过大;由于manifest的解析通常以页面刷新为触发点,且更新的缓存不会立即被使用,所以缓存的资源应以静态资源、更新频率比较低的资源为主。另外要做好对manifest文件的管理,由于清单内文件不可访问或manifest更新不及时造成的一些问题。

使用方法:

1.navigator.online  检测是否在线
2.浏览器向服务端发出请求, html标签中这样写: <html manifest=”demo.appcache” >;
这样浏览器就会向请求其它资源一样向服务器请求这个名为 test.manifest文件了。
在服务器端添加 mime-type text/cache-manifest
3.配置test.manifest 文件

①CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存

②NETWORK – 在此标题下列出的文件需要与服务器的连接,且不会被缓存

③FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

 

更新:只有server端的manifest文件改变,浏览器才会重新拉取离线数据,需要页面再次刷新(2次刷新才能获取新资源),更新是全局性的,无法单独更新某个文件。

Reproduced please indicate the source: 飞嗨_分享互联网 » 详解 JavaScript 存储

Like (0) or Share (0)
Guest Post my comment   Change account
Cancel comment

emoj
(0)person posted

Effective,Professional,Conform to SEO

Contact us