Using Javascript sessionStorage versus Cookies

Tags
cookies, html5, javascript, localstorage, sessions, sessionstorage

 
Thread Tools Search this Thread
# 1  
Old 10-14-2018
Using Javascript sessionStorage versus Cookies

In browsers that support HTML5 we can use sessionStorage in Javascript instead of Cookies to set variables that need to be persistent per session.

For example, in this PHP code for the forums, we can do something like the following:

Code:
$localStorage  = '<script>'; 
$sessionStorage .= 'sessionStorage.setItem("showMember","true");'; 
$sessionStorage .= 'sessionStorage.setItem("thisScript","'.THIS_SCRIPT.'");'; 
$sessionStorage .= 'sessionStorage.setItem("styleId","'.STYLEID.'");'; 
$sessionStorage .= 'sessionStorage.setItem("userId","'.USER_ID.'");'; 
$sessionStorage .= '</script>'."\n";

And of course insert the code above in our HTML template somewhere (like the header) and then use the sessionStorage vars (from our server side PHP code) in our Javascript and jQuery scripts.

The main difference is that the data stored in sessionStorage is not sent back to the server per request (like in Cookies) and the storage limit is much bigger for sessionStorage than for Cookies.

In HTML5 sessionStorage differs primarily from localStorage in that localStorage does not go away even after the tab or browser is closed. It can of course be cleared with the localStorage.clear() method or cleared in browser by the user.

Here is a small example of how we use sessionStorage:

Code:
<script>
$(function() {
  if(sessionStorage.showMember && sessionStorage.thisScript !='showpost')
  {
    var text =  document.getElementById("neo-notice").innerHTML;
    var unread = text.match(/>0<\/strong>/g);
     if(!unread){
       $('.avatarbadge').show();
     }
      else {  $('.avatarbadge').hide();}
  }
});
</script>

In the code above, we are trapping an error because of some strange bug on one of our pages when we show notifications to users. Otherwise, we check for messages unread and if so, we display the badge.

Here is another example:

Code:
<script>
$(document).ready(function() {
if(sessionStorage.showMember && sessionStorage.thisScript != 'showpost')
 {
  if ($('#myMemberPanel').length > 0) {
  document.getElementById("myMemberPanel").style.width = "0px";
 }
}
});
</script>

In the above example, we trap the same error (on the 'showpost' pages which we have deprecated) and otherwise we set the initial width of the memberPanel to 0px;

These are fairly trivial examples, but they do help illustrate how easy it it is in HTML5 to use localStorage and sessionStorage in Javascript.

Last edited by Don Cragun; 10-14-2018 at 02:58 PM.. Reason: Move "<script>" inside CODE tags.

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Cookies in UNIX rvinodh3 UNIX for Dummies Questions & Answers 1 03-19-2014 10:51 AM
Bash_profile versus bashrc fretagi UNIX for Dummies Questions & Answers 8 03-18-2014 05:00 PM
Printing via hpnpf versus lp haezeban SCO 2 08-26-2010 02:19 PM
Solaris versus Centos karlochacon Solaris 1 06-27-2010 03:16 PM
Awk Versus Cut jaysunn Shell Programming and Scripting 6 12-29-2009 10:36 AM
PHP Help - Delete cookies and redirect back to referrer Adrnalnrsh Web Programming 0 11-19-2009 01:22 PM
.chsrc Versus .login govindts Shell Programming and Scripting 1 11-28-2007 05:30 PM
cpio versus cp fredao UNIX for Advanced & Expert Users 1 09-17-2007 03:05 PM
<LF> versus <CR>/<LF> jerardfjay Shell Programming and Scripting 1 10-20-2005 07:09 PM
CTRL+H versus ^? versus BACKSPACE alan UNIX for Dummies Questions & Answers 3 07-23-2003 02:08 PM
AF_UNIX versus AF_INET ivkumar Security 0 10-08-2002 01:38 PM