I’ve written a couple of post earlier about how to work with JS and cookies, that’s cool but now in the era of the client side it’s time to take a look into how to work with HTML5 Web Storage and Local Storage and in the example, how to create a simple text-size switcher.
What is Web Storage and what can we do with it?
Ok, with local storage, a web application like SharePoint can store data locally within the user’s browser. Before HTML5, app data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Yeah localStorage works somewhat like a database; it stores some data locally on the user’s browser, which then can be retrieved using JavaScript. The data will always be available in the user’s browser, even after the user has closed the browser.
There are many different ways you could use web storage, like:
- Navigation: Remember the last state, add an active class into the DOM
- Forms: Remember form values
- Branding: Let the user decide things like an alternate CSS (style sheet switcher)
- WebService calls: If something doesn’t change then there is no point in loading it over the Internet compared to local access which is so much faster
Local Storage v/s Cookie
Cookies, the old way of saving data are primarily for reading server-side. Local storage can only be read client-side, so if you need to create a function for the client and not for the server, use Local Storage. Got it? The Local Storage stays on the client, while cookies are sent to the server through the HTTP header. Cookies are not considered secure and not able to hold much data either.
More to note
The Local Storage stores data with no expiration date and gets cleared only through JavaScript or by clearing the Browser Cache or Locally Stored Data, unlike cookie expiry. There’s two kind of ‘storage objects’, Local and Session (storage). A Local storage will keep the data stored when you close the tab or a the broser window and the Session storage will not keep anything stored. Local Storage comes with HTML5, so if you need to create an app supporting really old browsers (for example IE7) you can use cookies as a fallback by for example modernizr as the detector. However Local Storage are a part of the HTML5 specs, so if you allow HTML5 in your master page, which comes out of the box in SharePoint 2013 and the users have IE8, latest Google Chrome, Safari, Firefox etc your ready to go!
Demo: Create a text-size switcher
This example will change the SharePoint body font size from small to large in Three steps. This will work in SharePoint 2013, onprem or Online. I’ve tested this in IE11 and latest Google Chrome. Take a look at a video of the text-size switcher. Click at the SWF file and open it.
I’ll just provide you the HTML, CSS and JS – you could implement this in a custom masterpage, APP or for example in a text file linked from a content editor web part. In this case I’m using _spBodyOnLoadFunctionNames and if your using a custom master page, be sure to include a reference to an external JS file in the bottom of the master page, just above the ending body tag. Keep the reference to jQuery in the head section of your master page. You can download a masterpage with a css file and js file if you need to take a look from here.
Markup
<div class="radioFontHolders">
<div class="letterFontsHolder">
<div class="miniLetter">Aa</div>
<div class="midLetter">Aa</div>
<div class="bigLetter">Aa</div>
<div style="clear:both"></div>
</div>
<div class="radioHolders">
<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" value="miniFont" /><label for="radio-1-1"></label>
<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" value="midFont" /><label for="radio-1-2"></label>
<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" value="maxFont" /><label for="radio-1-3"></label>
</div>
</div>
JS
// Using SP JS API to push the function instead of document ready or window load
_spBodyOnLoadFunctionNames.push("Demo.Intranet.Contrast");
// Establish Namespace
Type.registerNamespace('Demo')
Demo.Intranet = Demo.Intranet || {};
// start set contrast ---
Demo.Intranet.Contrast = function () {
jQuery('.radioHolders input').click(function () {
var fontCode = jQuery(this).val();
if (fontCode == 'miniFont'){
jQuery('#miniFont').attr("checked", "checked");
jQuery("body").removeClass("midFont MaxFont").addClass("miniFont");
}
else if (fontCode == 'midFont'){
jQuery('#midFont').attr("checked", "checked");
jQuery("body").removeClass("miniFont MaxFont").addClass("midFont");
}
else if (fontCode == 'maxFont'){
jQuery('#maxFont').attr("checked", "checked");
jQuery("body").removeClass("miniFont midFont").addClass("MaxFont");
}
else{}
localStorage.setItem("fontCode", fontCode);
});
if (localStorage.getItem("fontCode") !== null) {
var fontCode = localStorage.getItem("fontCode");
if (fontCode == 'miniFont'){
jQuery('#radio-1-1').attr("checked", "checked");
jQuery("body").removeClass("midFont MaxFont").addClass("miniFont");
}
else if (fontCode == 'midFont'){
jQuery('#radio-1-2').attr("checked", "checked");
jQuery("body").removeClass("miniFont MaxFont").addClass("midFont");
}
else if (fontCode == 'maxFont'){
jQuery('#radio-1-3').attr("checked", "checked");
jQuery("body").removeClass("miniFont midFont").addClass("MaxFont");
}
else{}
}
}
CSS
.radioFontHolders{
border:0px #e1e1e1 solid;
padding:10px 5px 10px 5px;
margin-top:30px;width:100%;
}
.letterFontsHolder{
padding:1px;width:170px;
}
.miniLetter, .midLetter, .bigLetter{
float:left;font-family:"Times New Roman", Times, serif;
font-weight: 700;height:32px;
border-bottom:1px #ccc solid;
color:#035183
}
.miniLetter{
width:33.33333%;
font-size:18px;
width:40px;line-height:41px;
padding-left:7px;
}
.midLetter{
width:33.33333%;
font-size:26px;width:50px;line-height:36px;
padding-left:7px;
}
.bigLetter{
width:33.33333%;
font-size:40px;width:60px;line-height:26px;
}
.font-1, .font-2, .font-3{
width:28px;float:left;height:20px;
}
/* set the fonts */
.miniFont{font-size:0.9em}
.midFont{font-size:1.3em}
.MaxFont{font-size:1.5em}
.radioHolders{
margin-top:10px;
margin-bottom:10px;
z-index: 1;width: 200px;
z-index:999;background-color: transparent
}
/* radios */
.regular-radio{display: none}
.regular-radio + label {
margin-left:10px;
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
border-radius: 100%;
zoom: 1; cursor: pointer;
display: inline-block;
margin-right: 12px;
-webkit-appearance: none;
}
.regular-radio:nth-child(1) + label:after{background-color:#CDCDCD}
.regular-radio:nth-child(3) + label:after{background-color:#CDCDCD}
.regular-radio + label:after{background-color:#CDCDCD}
/* selected */
.regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #84B942;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
border-radius: 100%;
box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4), 0 1px 1px hsla(0,0%,100%,.8);
content: '';
display: block;
}
/* not selected */
.regular-radio + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
border-radius: 100%;
box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4), 0 1px 1px hsla(0,0%,100%,.8);
content: '';
display: block;
}
Thanks, Christian
