Caching and Local Storage

Ask the community
,
1

The homepage of my new site: https://www.genshin360.com/

I am worried about page loading times since the site is pretty graphic heavy. Should I turn on caching? I read the help text on caching but I am not sure if and how it applies to my page. There are number of dynamic items on the page:

  • The selection box on the right side use storage local to save the choices you made.

  • The domain drops box on the right side. This is a slider with the slider selected based on the day of the week. So this changed daily automatically.

  • On a daily basis I change the community videos selection

  • the active event list and list of featured content come from a collection but do not change often.

I need some guidance. Also: how does local storage work? Is this through cookies? Just curious if and how this impacts my users.

2

Frankly this is my first try at writing code and its on my homepage. It seems to work but I would love a quick review to make sure I am not unintentionally wrecking my site…

import {local} from ‘wix-storage’ ;

$w.onReady( function () {

// Show Today and Select Right Slide for Farmables ---------------------
var Days = [ ‘Sunday’ , ‘Monday’ , ‘Tuesday’ , ‘Wednesday’ , ‘Thursday’ , ‘Friday’ , ‘Saturday’ ];
var Months = [ “January” , “February” , “March” , “April” , “May” , “June” , “July” , “August” , “September” , “October” , “November” , “December” ];

var Today = new Date();
var DayName = Days[Today.getDay()];
var MonthName = Months[Today.getMonth()];
var DayinMonth = Today.getDate()
var TodayDayNum = Today.getDay()- 1

$w( "#text308" ).text = DayName +  ', '  + MonthName +  ' '  + DayinMonth; 
$w( "#slideshow1" ).changeSlide(TodayDayNum);

//Load Current Dailies ---------------------
var Dailies = local.getItem( “Dailies” );
var Weeklies = local.getItem( “Weeklies” );
var Fortnightlies = local.getItem( “Fortnightlies” );

// Convert to number arrays
if (Dailies !== null ) {
var DailiesArray = Dailies.split( ‘,’ ).map( function (item) {
return parseInt(item, 10 );
});
}
if (Weeklies !== null ) {
var WeekliesArray = Weeklies.split( ‘,’ ).map( function (item) {
return parseInt(item, 10 );
});
}
if (Fortnightlies !== null ) {
var FortnightliesArray = Fortnightlies.split( ‘,’ ).map( function (item) {
return parseInt(item, 10 );
});
}

//Preselect the Values
$w( “#checkboxGroup1” ).selectedIndices = DailiesArray;
$w( “#checkboxGroup2” ).selectedIndices = WeekliesArray;
$w( “#checkboxGroup3” ).selectedIndices = FortnightliesArray;

//Capture the new selections
$w( “#checkboxGroup1” ).onClick( (event) => {
let targetID1 = event.target.id;
let optionID1 = $w( “#checkboxGroup1” ).selectedIndices;
local.setItem( “Dailies” , optionID1);
} );
$w( “#checkboxGroup2” ).onClick( (event) => {
let targetID2 = event.target.id;
let optionID2 = $w( “#checkboxGroup2” ).selectedIndices;
local.setItem( “Weeklies” , optionID2);
} );
$w( “#checkboxGroup3” ).onClick( (event) => {
let targetID3 = event.target.id;
let optionID3 = $w( “#checkboxGroup3” ).selectedIndices;
local.setItem( “Fortnightlies” , optionID3);
} );

});