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

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

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

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
You can’t perform that action at this time.