使用localstorage,如何在javascript中保存切换状态

时间:2017-04-11 19:23:06

标签: javascript local-storage nanogallery

我正在使用图片库插件nanoGallery2和自定义按钮,将图片的图标切换为“收藏夹”。我想在localstorage中保存图标的切换状态。由于我显然对自己如何让这个工作无能为力,我希望有人可以指出我正确的方向。这是codepen我尝试在本地存储。哪个不起作用。

我的代码:

$(document).ready(function () {
$("#nanogallery2").nanogallery2({
thumbnailWidth:             'auto',
thumbnailHeight:            200,
itemsBaseURL:               'http://nanogallery2.nanostudio.org/samples/',
    locationHash:               false,
thumbnailHoverEffect2 :     '.ngy2info_opacity_0_1|.ngy2info_scale_5_1',
thumbnailBuildInit2:        '.ngy2info_translateY_-50%|.ngy2info_translateX_-50%',
thumbnailToolbarImage:      { topLeft: 'custom1' },
fnThumbnailInit:            myTnInit,
fnThumbnailToolCustAction:  myTnTool,
icons:                      { thumbnailCustomTool1 : '<i class="nGY2Icon icon-heart"></i>'}

});
});

var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
localStorage.setItem('favorites', JSON.stringify(favorites)); 
localStorage.getItem('favorites');


// click/touch on custom tool/button
function myTnTool( action, item ) {
console.dir(item);

switch( action ) {
case 'info':     
  break;
case 'custom1':
  // switch favorite status
  item.customData.favorite=!item.customData.favorite;
  TnSetFavorite(item);

  break;
 }
 }

// Add custom elements after one thumbnail is build
 function myTnInit( $e, item, GOMidx ) { 
  TnSetFavorite( item);

}

// Set the favorite status
function TnSetFavorite(item) {
var c='#fff';
var d='#f90';
if( item.customData.favorite ) {
    item.$elt.find('[data-ngy2action="custom1"]').css('color',d);
 localStorage.setItem(item, 'favorites');
} else {
item.$elt.find('[data-ngy2action="custom1"]').css('color',c);
localStorage.removeItem(item);
}
}

0 个答案:

没有答案