有没有可以模拟的库localStorage？
我一直在使用Sinon.JS进行大多数其他 javascript模拟，并且发现它真的很棒。
我的初始测试表明 localStorage 拒绝在 Firefox (sadface) 中分配，所以我可能需要对此进行某种破解：/
我现在的选择（如我所见）如下：
??????您如何看待这些方法，您认为还有其他更好的方法来解决这个问题吗？无论哪种方式，我都会把我最终在 github 上制作的结果“库”放在开源的优点上。
这是用 Jasmine 模拟它的一种简单方法：
let localStore;
beforeEach(() => {
localStore = {};
spyOn(window.localStorage, 'getItem').and.callFake((key) =>
key in localStore ? localStore[key] : null
);
spyOn(window.localStorage, 'setItem').and.callFake(
(key, value) => (localStore[key] = value + '')
);
spyOn(window.localStorage, 'clear').and.callFake(() => (localStore = {}));
});
如果要在所有测试中模拟本地存储，请在测试beforeEach()的全局范围内声明上面显示的函数（通常的位置是specHelper.js脚本）。
只需根据您的需要模拟全局 localStorage / sessionStorage （它们具有相同的 API）。
例如：
// Storage Mock
function storageMock() {
let storage = {};
return {
setItem: function(key, value) {
storage[key] = value || '';
},
getItem: function(key) {
return key in storage ? storage[key] : null;
},
removeItem: function(key) {
delete storage[key];
},
get length() {
return Object.keys(storage).length;
},
key: function(i) {
const keys = Object.keys(storage);
return keys[i] || null;
}
};
}
然后你实际做的事情是这样的：
// mock the localStorage
window.localStorage = storageMock();
// mock the sessionStorage
window.sessionStorage = storageMock();
还要考虑在对象的构造函数中注入依赖项的选项。
var SomeObject(storage) {
this.storge = storage || window.localStorage;
// ...
}
SomeObject.prototype.doSomeStorageRelatedStuff = function() {
var myValue = this.storage.getItem('myKey');
// ...
}
// In src
var myObj = new SomeObject();
// In test
var myObj = new SomeObject(mockStorage)
根据模拟和单元测试，我喜欢避免测试存储实现。例如，在设置项目等后检查存储长度是否增加没有意义。
由于替换真实 localStorage 对象上的方法显然不可靠，因此请使用“哑”模拟存储并根据需要存根各个方法，例如：
var mockStorage = {
setItem: function() {},
removeItem: function() {},
key: function() {},
getItem: function() {},
removeItem: function() {},
length: 0
};
// Then in test that needs to know if and how setItem was called
sinon.stub(mockStorage, 'setItem');
var myObj = new SomeObject(mockStorage);
myObj.doSomeStorageRelatedStuff();
expect(mockStorage.setItem).toHaveBeenCalledWith('myKey');
当前的解决方案在 Firefox 中不起作用。这是因为 localStorage 由 html 规范定义为不可修改。但是，您可以通过直接访问 localStorage 的原型来解决此问题。
跨浏览器的解决方案是模拟对象，Storage.prototype例如
而不是spyOn(localStorage, 'setItem')使用
spyOn(Storage.prototype, 'setItem')
spyOn(Storage.prototype, 'getItem')
取自bzbarsky和 teogeos的回复https://github.com/jasmine/jasmine/issues/299
这就是我所做的...
var mock = (function() {
var store = {};
return {
getItem: function(key) {
return store[key];
},
setItem: function(key, value) {
store[key] = value.toString();
},
clear: function() {
store = {};
}
};
})();
Object.defineProperty(window, 'localStorage', {
value: mock,
});