这篇文章主要介绍了 JavaScript 三种数据存储方式之间的区别, 指的分别是 sessionStorage 和 localStorage 以及 cookie 三种浏览器端的数据存储方式, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
sessionStorage 、localStorage 和 cookie 之间的共同点:
都是保存在浏览器端,且同源的。
sessionStorage 、localStorage 和 cookie 之间的区别:
cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下。
存储大小限制也不同,cookie 数据不能超过 4k,同时因为每次 http 请求都会携带 cookie,所以 cookie 只适合保存很小的数据,如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie 只在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。
作用域不同,sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie 也是在所有同源窗口中都是共享的。
web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
封装的 localStorage 的方法,可以控制存储数据的条数,以及时间
- define(function (require) {
- var $ = require('jquery');
- var Cache = {};
- function support() {
- var _t = !(typeof window.localStorage === 'undefined');
- return _t;
- }
- $.extend(Cache, {
- config: {
- size: 5,
- // lifeTime: 86400 //一天的秒数
- lifeTime: 1*60
- },
- localStorage: window.localStorage,
- memQueue: (function () {
- if (support()) {
- var jsonStr = window.localStorage.getItem('LRUConfig');
- return jsonStr ? JSON.parse(jsonStr) : {
- keys: {},
- objs: []
- };
- } else {
- return {};
- }
- })(),
- get: function(appid, url) {
- if (true == support()) {
- var key = appid + ':' + url;
- //开始做LRU算法。
- this.LRU(key);
- //LRU算法结束。
- var isFresh = true;
- var nowTime = (new Date()).getTime() / 1000;
- if(key in this.memQueue.keys){
- var cacheTime = this.memQueue.keys[key].life / 1000;
- //如果过期时间超过 配置的lifeTime,
- //则清除掉当前缓存
- if(nowTime - cacheTime >= this.config.lifeTime){
- delete this.memQueue.keys[key];
- for (var i=0, len = this.memQueue.objs.length; i < len; i++) {
- var _o = this.memQueue.objs[i];
- if(_o.key == key){
- this.memQueue.objs.splice(i,1);
- break;
- }
- }
- isFresh = false;
- }
- }
- //如果isFresh为假,就是已过期,则返回null,否则从localStorage中取
- return (false == isFresh) ? null : this.localStorage[key];
- }
- },
- set: function(appid, url, value) {
- if (true == support()) {
- var key = appid + ':' + url;
- var lruKey = this.getLRU();
- //淘汰最近最少使用的这个。
- //另外起一个方法读取最符合淘汰的这个
- //前提是当前这个key,不在localStorage里面。
- if (lruKey) {
- this.localStorage.removeItem(lruKey);
- }
- //开始设置一下这个值
- //为了兼容性,用以下方法设置
- if (typeof this.memQueue.objs != 'undefined' &&
- this.memQueue.objs.length <= this.config.size) {
- this.localStorage.removeItem(key);
- } else {
- while (this.memQueue.objs.length >= this.config.size) {
- var lruKey = this.getLRU();
- //淘汰最近最少使用的这个。
- //另外起一个方法读取最符合淘汰的这个
- if (lruKey) {
- this.localStorage.removeItem(lruKey);
- delete this.memQueue.keys[lruKey];
- for (var i = 0; i < this.memQueue.objs.length; i++) {
- var _o = this.memQueue.objs[i];
- if(_o.key == lruKey){
- this.memQueue.objs.splice(i,1);
- break;
- }
- }
- }
- }
- }
- this.localStorage[key] = value;
- //当前的key,也必须lru一下
- this.LRU(key);
- //lru结束
- this.localStorage.setItem('LRUConfig', JSON.stringify(this.memQueue));
- }
- },
- /*
- * 近期最少使用算法
- */
- LRU: function(key) {
- var memQueue = this.memQueue;
- if (typeof memQueue.objs != 'undefined') {
- var _o = memQueue.objs;
- //开始计算那个要淘汰的key,
- //就是那个times最大的,如果times最大的有几个
- //则返回那个time最小的
- var isIn = false;
- for (var i = 0, len = _o.length; i < len; i++) {
- _o[i].times = (key == _o[i].key) ? 0 : _o[i].times + 1;
- _o[i].time = (key == _o[i].key) ? (new Date()).getTime() : _o[i].time;
- if(key == _o[i].key && false == isIn){
- isIn = true;
- }
- }
- // 如果
- if(false == isIn){
- var _to = {
- 'key': key,
- 'times': 0,
- 'time': (new Date()).getTime(),
- 'life': (new Date()).getTime()
- };
- this.memQueue.keys[key] = _to;
- this.memQueue.objs.push(_to);
- }
- _o.sort(function(f, s) {
- //按times降序排列。
- if (f.times < s.times) {
- return 1;
- } else if (f.times > s.times) {
- return -1;
- } else {
- //开始比较time
- //按time,时间升序排列
- if (f.time < s.time) {
- return -1;
- } else {
- return 1;
- }
- }
- });
- } else {
- this.memQueue.objs = [];
- this.memQueue.keys = {};
- var _to = {
- 'key': key,
- 'times': 0,
- 'time': (new Date()).getTime(),
- 'life': (new Date()).getTime()
- };
- this.memQueue.keys[key] = _to;
- this.memQueue.objs.push(_to);
- return null;
- }
- },
- /*
- * 读取需要淘汰的一项
- */
- getLRU: function() {
- var _o = this.memQueue.objs;
- if (_o) {
- return (_o.length >= this.config.size) ? _o.shift().key : null;
- }
- return null;
- }
- });
- return {
- 'cache': Cache
- };
- });
使用方法
- var cache = require('cache');
- // set 值
- cache.Cache.set('ip', '你自己的一个url', value);
- // get值
- cache.Cache.get('ip')
来源: http://www.phperz.com/article/17/0227/266031.html