Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 Storage without the restrictions on storing objects
if (typeof HTML5 == 'undefined') {
var HTML5 = {};
}
/**
* Wrapper class to deal with easily storing values in local storage
* without having to constantly use JSON.parse and JSON.stringify everywhere
* you want to save an object.
*
* @param {String} index the base index to use in the localStorage global object
* @author Tom Chapman
*/
HTML5.localStorage = function(index)
{
/**
* @type {Mixed}
* @private
*/
var localValues;
/**
* @type {String}
* @private
*/
var localIndex;
/**
* Class level constructor
*
* @constructor
* @param {String} index
* @private
*/
var __init = function(index) {
if (typeof index != 'string' || index === null) {
throw new Error('A string index must be provided to HTML5.localStorage');
}
localIndex = index;
var currentLocalValue = localStorage.getItem(index);
if (typeof currentLocalValue != 'undefined' && currentLocalValue !== null) {
try {
localValues = JSON.parse(currentLocalValue);
} catch (err) {
localValues = currentLocalValue;
}
} else {
localValues = {};
}
}(index);
return {
/**
* Returns all vars or index from the localValues
*
* @param {String} [index] the index inside the object in use
* @return {Mixed}
*/
get: function(index) {
return (typeof index == 'undefined')
? localValues
: ((typeof localValues[index] != 'undefined')
? localValues[index]
: null);
},
/**
* Set localValues or an index in localValues
*
* @param {Mixed} value the value to assign to the object, or if index provided the index inside the object
* @param {String} [index] the index inside the object in use
* @return {Mixed}
*/
set: function(value, index) {
if (typeof index == 'undefined' || index === null) {
localValues = value;
} else {
if (typeof localValues != 'object') {
throw new Error();
}
localValues[index] = value;
}
localStorage.setItem(localIndex, (typeof localValues != 'string' && typeof localValues != 'number')
? JSON.stringify(localValues)
: localValues);
},
/**
* Removes either the whole object from the localStorage or the index provided
*
* @param {String} [index] the index inside the object in use
*/
remove: function(index) {
if (typeof index == 'undefined') {
localStorage.removeItem(localIndex);
} else if (typeof localValues[index] != 'undefined') {
delete localValues[index];
localStorage.setItem(localIndex, (typeof localValues != 'string' && typeof localValues != 'number')
? JSON.stringify(localValues)
: localValues);
}
}
};
};
if (typeof HTML5 == 'undefined') {
var HTML5 = {};
}
/**
* Wrapper class to deal with easily storing values in session storage
* without having to constantly use JSON.parse and JSON.stringify everywhere
* you want to save an object.
*
* @param {String} index the base index to use in the localStorage global object
* @author Tom Chapman
*/
HTML5.sessionStorage = function(index)
{
/**
* @type {Mixed}
* @private
*/
var sessionValues;
/**
* @type {String}
* @private
*/
var sessionIndex;
/**
* Class level constructor
*
* @constructor
* @param {String} index
* @private
*/
var __init = function(index) {
if (typeof index != 'string' || index === null) {
throw new Error('A string index must be provided to HTML5.sessionStorage');
}
sessionIndex = index;
var currentLocalValue = sessionStorage.getItem(index);
if (typeof currentLocalValue != 'undefined' && currentLocalValue !== null) {
try {
sessionValues = JSON.parse(currentLocalValue);
} catch (err) {
sessionValues = currentLocalValue;
}
} else {
sessionValues = {};
}
}(index);
return {
/**
* Returns all vars or index from the sessionValues
*
* @param {String} [index] the index inside the object in use
* @return {Mixed}
*/
get: function(index) {
return (typeof index == 'undefined')
? sessionValues
: ((typeof sessionValues[index] != 'undefined')
? sessionValues[index]
: null);
},
/**
* Set sessionValues or an index in sessionValues
*
* @param {Mixed} value the value to assign to the object, or if index provided the index inside the object
* @param {String} [index] the index inside the object in use
* @return {Mixed}
*/
set: function(value, index) {
if (typeof index == 'undefined' || index === null) {
sessionValues = value;
} else {
if (typeof sessionValues != 'object') {
throw new Error();
}
sessionValues[index] = value;
}
sessionStorage.setItem(sessionIndex, (typeof sessionValues != 'string' && typeof sessionValues != 'number')
? JSON.stringify(sessionValues)
: sessionValues);
},
/**
* Removes either the whole object from the sessionStorage or the index provided
*
* @param {String} [index] the index inside the object in use
*/
remove: function(index) {
if (typeof index == 'undefined') {
sessionStorage.removeItem(sessionIndex);
} else if (typeof sessionValues[index] != 'undefined') {
delete sessionValues[index];
sessionStorage.setItem(sessionIndex, (typeof sessionValues != 'string' && typeof sessionValues != 'number')
? JSON.stringify(sessionValues)
: sessionValues);
}
}
};
};
@zilveer

This comment has been minimized.

Copy link

@zilveer zilveer commented Sep 15, 2017

Hi,
nice class!

But how do I call the get/set/remove functions ?
is it for example:

HTML5.localStorage.get('itemname')
HTML5.localStorage.set('itemname', 'itemvalue')
HTML5.localStorage.remove('itemname')

respective

HTML5.sessionStorage.get('itemname')
HTML5.sessionStorage.set('itemname', 'itemvalue')
HTML5.sessionStorage.remove('itemname')

thanks for your response

@zilveer

This comment has been minimized.

Copy link

@zilveer zilveer commented Sep 18, 2017

Can you lend me a hand here?

EDIT: Ok I think I got it:

HTML5.sessionStorage('username').set('my name'); //Set a "my name" in "username" variable
HTML5.sessionStorage('username').get(); //Get "username" variable
HTML5.sessionStorage('username').remove(); //Remove "username" variable

regards

@chappy84

This comment has been minimized.

Copy link
Owner Author

@chappy84 chappy84 commented Dec 31, 2017

Apologies for the very delayed response @zilveer, it appears I missed your comments, as github doesn't send notifications for gists. I have now signed up to this service to try and avoid missing others in the future: https://github.com/tightenco/giscus

Anyway, although this is very old JS now, and could probably be easily replaced with more efficient ES6+ JS, both of these classes can be used in the same manner

For using as a non object value (string, bool, number, etc.) you can use the following:

var usernameSession = HTML5.sessionStorage('username'); // Prepares for using the "username" entry in session storage
usernameSession.set('my name'); // Set's "username" entry in the session storage to "my name"
var username = usernameSession.get(); // Retrieves the value "my name" from session storage entry "username"
usernameSession.remove(); // Removes the entry "username" from session storage

For using as an object value you can use the following:

var userSession = HTML5.sessionStorage('user'); // Prepares for using the "user" entry in session storage
userSession.set('my name', 'name'); // Set's "user" entry in the session storage to the JSON '{"name":"my name"}'
userSession.set({name: "my name"}); // Set's "user" entry in the session storage to the JSON '{"name":"my name"}'
var username = userSession.get('name'); // Retrieves the value "my name" from "name" property of the "user" object entry in session storage, i.e. user.name
var user = userSession.get(); // Retrieves the user object from the "user" entry in session storage, i.e. {name:"myname"}
userSession.remove('name'); // Removes the entry "name" from the "user" object in session storage
userSession.remove(); // Removes the entry "user" from session storage
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment