Transparently saving data in HTML5 Local Storage - javascript

I would like to use Javascript object literals and arrays normally and have them automatically saved in local storage.
I would like to read, edit and delete members of the object literals and arrays as I would with any other object - using normal assignment operator a.b = 'c' for assigning values and normal dot-notation expressions d.e for reading.
When browser next time visits the page, the previous contents of these arrays and object literals would be automatically loaded from the local storage. I wish not to explicitly call anything to store this data, it should just work.
What are my options?

example using methods instead of vanilla properties
var SavedObject= {
b: function(val) {
if (typeof(val)!=="undefined") {
this._b=val;
this.SerialiseToLocalStorage();
}
return val;
},SerialiseToLocalStorage: function() {
//whatever
}
}
SavedObject.b(1); //set value
var x = SaveObject.b(); // get value
You'll also need to initalise the values on document load of course...

Related

javascript variable changing value after changes in original variable

I am having trouble maintaining the original value of a variable after making new changes to the original variable.
Code:
(...)
data = Illumination.calculate_N(data)
data = Illumination.calculate_pi(data)
data = Illumination.calculate_kwh(data)
data = Illumination.calculate_ca(data)
let data_base = data
let ca_base = data.ca
let kwh_base = data.kwh
let pi_base = data.pi
(...)
data = Illumination.calculate_N(data)
data = Illumination.calculate_pi(data)
data = Illumination.calculate_kwh(data)
data = Illumination.calculate_ca(data)
let data_proposto = data
let ca_proposto = data.ca
let kwh_proposto = data.kwh
let pi_proposto = data.pi
-----------------------------------
EXAMPLE:
static calculate_ai(data){
data.ai = data.areaTotal*data.au
return data
}
It was expected that the original variable (date) would have its values ​​changed, and this happens correctly, however, the variables data_base and data_proposto are not keeping their values
Both variables at the end of the calculation have the same values ​​as the variable date
The variables ca_proposto, ca_base, and the like store their values ​​correctly
Any idea?
The only interactions of the variables data_base and data_proposto were their creations with the data variable and their return of the function
OBS: If I use console.log () to view the value of the data_base variable before redoing the new calculations (Illumination.calculate_N (data)), the value of the variable appears correctly as it should, it is changed shortly after these calculations.
Because in both cases you are assigning not the object itself in the current state, but a reference to that object. What you need to do is to clone the object so the state is frozen at that point.
Simple Clone (Shallow Copy)
let data_base = Object.assign({}, data); //you get a clone of data
let data_proposto = Object.assign({}, data);
The limitation here is that it only does a shallow copy. See Deep Copy below for further explanation.
JSON Clone
This is a quick-and-dirty way to clone as it converts a JSON object to a string, and then back. i.e. you are no longer getting a reference, but a new object.
let data_base = JSON.parse(JSON.stringify(data));
let data_postero = JSON.parse(JSON.stringify(data));
But this won't work if your object is not JSON-safe.
Deep Copy
The least elegant method is probably safest. It deep copies the properties over into a new object. The key difference with Object.assign() is that it copies the values of nested properties, whereas Object.assign() copies the reference to nested objects.
So with Object.assign() any subsequent changes in your nested objects will affect all versions of your "clones". This won't happen if your clones only have property values of those nested objects at the time of cloning – these values are not affected by any changes to the nested objects.
const deepCopy = function(src) {
let target = {};
// using for/in on object also returns prototype properties
for (let prop in src) {
// .hasOwnProperty() filters out these prototype properties.
if (src.hasOwnProperty(prop)) {
target[prop] = src[prop]; //iteratively copies over values, not references
}
}
return target;
}
let data_base = deepCopy(data);
let data_postero = deepCopy(data);
#chatnoir Defined the problem very well, But I do not agree with his JSON serialization solution due to the below probleam:
You will lose any Javascript property that has no equivalent type in
JSON, like Function or Infinity. Any property that’s assigned to
undefined will be ignored by JSON.stringify, causing them to be missed
on the cloned object.
My suggestion to perform deep copy is to rely on a library that’s well
tested, very popular and carefully maintained: Lodash.
Lodash offers the very convenient clone and deepclone functions to perform shallow and deep cloning.
Lodash has this nice feature: you can import single functions separately in your project to reduce a lot the size of the dependency.
Please find the running sample code here: https://glitch.com/edit/#!/flavio-lodash-clone-shallow-deep?path=server.js:1:0
You are using the same variable data inside and outside functions.
ie; data is in the global scope.
static calculate_ai(data){
data.ai = data.areaTotal*data.au
return data
}
even though you are expecting the scope of the variable data inside the method calculate_ai to be limited to that method, it is not the case. data is in global scope and therefore, the value changes inside the method for the variable affects outside as well.
An effective solution is to use a different variable inside the method.
A variable is like an octopus tentacle, and not as a box (as it’s commonly described). In this analogy, the variable's name can be thought of as the name of a tentacle.
A variable (tentacle) holds on to a value in what’s called a binding. A binding is an association of a variable to a value: x = 1.
In JavaScript, if a variable b holds on to variable a, changing the value to which variable a holds onto, will change the value to which variable b holds onto, as b and a are referencing to the same value:
let a = {key: 1}
let b = a
console.log(`a: ${a.key}`) // -> 1
console.log(`b: ${b.key}`) // -> 1
a.key = 2
console.log(`a: ${a.key}`) // -> 2
console.log(`b: ${b.key}`) // -> 2
a = {key: 3} // This will point variable 'a' to a new object, while variable 'b' still points to the original object.
console.log(`a: ${a.key}`) // -> 3
console.log(`b: ${b.key}`) // -> 2

Pass JSON object that contains Array with session.Storage

I'm trying to pass a JSON object using the function session.Storage, in order to keep the object browsing between pages. The JSON object looks like this:
var shapeResult={"accuracy":
{"Syntactic":[], "Semantic":[], "Data_Assurance":[],"Risk":[]},
"completness":
{"Record":[], "Attribute":[],"Completness":[]},
"consistency":
{"Integrity":[]}
};
In my page there's a function that first assigns some values to the empty arrays (as strings) :
var shapeResult={"accuracy":
{"Syntactic":[ID,EMAIL] "Semantic":[ID]}
};
For each of these single value my Function will assign a 0, or a 1. In this way, accessing, for example the object, with this expression:
shapeResult.accuracy.Syntactic
I would obtain either a 0, or 1.
Then I try to save it in the session storage trough
session.Storage.setItem('session_data',JSON.stringify(session_data_temp));
session_data_temp=JSON.parse(session.Storage.getItem('session_data'))
What I obtain from the sessionStorage is the first JSON object, without the added values in the array and the 0's and 1's.
What's the problem?
Use sessionStorage instead of session.Storage
DEMO
var shapeResult={"accuracy":
{"Syntactic":1}
};
sessionStorage.setItem('session_data',JSON.stringify(shapeResult));
var session_data_temp=JSON.parse(sessionStorage.getItem('session_data'));
console.log(session_data_temp);

How do i append an object call with a variable JS

So the problem, i have data that i call by using window.blah.blah and it will spit out info based on a user or an item in a database.
Now my problem is that i want to use the window.blah.blah with a dynamic appendage so like window.blah.blah.VARIABLE1
i have tried window.blah.blah.instances[variable] but i get a typeerror saying the value of variable is not defined (so if variable = test1 the error would be TypeError: Cannot read property 'test1' of undefined. variable is generated so it can be test1 test2 that correspond to stored objects.
if it helps i am using the call within a loop that is using it to get access a stored json obj with different object names.
also if I one of the objects is called test1 and i do window.blah.blah.test1 it accesses the object but window.blah.blah.instances[test1] gets the above error.
What am i doing wrong?
Perhaps the syntax you are looking for is window.blah.blah[VARIABLE1]
(assuming the blahs are objects.)
note that storing data on window is typically a bad idea, so for the following example, I'll move the top-level object from the global space (accessed through window) into a local variable:
var myObj = {
blah: {
blah: {}
}
};
var fooVar == 'foo';
function getMyDynamicVariable() {
return "foo"; //really this would by some dynamically generated string
}
//example usage:
myObj.blah.blah[getMyDynamicVariable()];
// OR
myObj.blah.blah[fooVar];
// would be the same as
myObj.blah.blah.foo //(in this exact example, where all functions and variables contain the string 'foo'.)

HTML5 localstorage methods advantages?

I've been using localStorage and a question came to me:
Which is the advantage using setItem and getItem methods rather than:
SET ITEM : localStorage.myKey = "myValue";
GET ITEM : localStorgae.myKey --> returns "myValue"
Are they just helper methods then? Good practices?
Just about curiosity thanks.
HTML5 Storage is based on named key/value pairs. You store data based on a named key, then you can retrieve that data with the same key. The named key is a string. The data can be any type supported by JavaScript, including strings, Booleans, integers, or floats. However, the data is actually stored as a string. If you are storing and retrieving anything other than strings, you will need to use functions like parseInt() or parseFloat() to coerce your retrieved data into the expected JavaScript datatype.
interface Storage {
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
};
Calling setItem() with a named key that already exists will silently overwrite the previous value. Calling getItem() with a non-existent key will return null rather than throw an exception.
Like other JavaScript objects, you can treat the localStorage object as an associative array. Instead of using the getItem() and setItem() methods, you can simply use square brackets. For example, this snippet of code:
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
…could be rewritten to use square bracket syntax instead:
var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;
Maybe this hope. :D
Reference: http://diveintohtml5.info/storage.html
set/getItem are better than property-access for the following reasons:
localStorage coerces all its input into strings, but you can overwrite the set/getItem methods to perform serialization and deserialization to support types other than strings:
var basicSetItem = localStorage.setItem;
localStorage.setItem = function(key, val) {
basicSetItem.call(localStorage, key, JSON.stringify(val));
}
var basicGetItem = localStorage.getItem;
localStorage.getItem = function(key) {
return JSON.parse(basicGetItem.call(localStorage, key));
}
You cannot achieve an equivalent effect for all storage property values using ECMAScript 5 APIs.
You cannot set the storage key length, and you cannot access the keys getItem, setItem, or removeItem without using function access:
localStoage.length = "foo"; // does not work
localStoage.setItem("length", "foo"); // works
var bar = localStoage.setItem; // gets the `setItem` function
var bar = localStorage.getItem("setItem"); // gets the value stored in the `setItem` key

how to get the value 'dynamically' from an associative array in javascript?

i am trying to get a value from a key stored on a string variable proyNombre, but whenever i call it via the common method "myAssociativeArray.MyKey", it gets the variable 'proyNombre' as the key, instead of getting its value and passing it as a key.
proyectos.each(function(index){
var proyNombre = this.value;
if(!(proyNombre in myArray)){ // whenever the variable is undefined, define it
myArray[proyNombre] = horas[index].value-0 + minutos[index].value/60;
}
else{
console.log(myArray.proyNombre); //This doesnt work, it tries to give me the value for the key 'proyNombre' instead of looking for the proyNombre variable
console.log(myArray.this.value); //doesnt work either
}
});
Try:
console.log(myArray[proyNombre]);
myArray is actually an object in javascript. You can access object properties with object.propertyName or, object['propertyName']. If your variable proyNombre contained the name of a property (which it does) you can use the second form, like I did above. object.proyNombre is invalid - proyNombre is a variable. You can't do for example:
var myObject = {};
myObject.test = 'test string';
var s = 'test';
console.log(myObject.s); // wrong!!
but you could then do:
console.log(myObject.test);
console.log(myObject['test']);
console.log(myObject[s]);
You need to use the same syntax you used to set the value:
console.log(myArray[proyNombre]);
Simply access the value with myArray[proyNombre].
You're doing it right in the assignment: myArray[proyNombre]. You can use the same method to retrieve the variable.
If you change:
console.log(myArray.proyNombre);
console.log(myArray.this.value);
to
console.log(myArray[proyNombre]);
console.log(myArray[this.value]);
You should get the same value (the value for the key represented by the variable proyNombre) logged twice.
It's true that Javascript doesn't have associative arrays but objects in Javascript can be treated like associative arrays when accessing their members.

Categories