Introduction
In my last post I talked about the different ways of how you can implement Client-Side-Storage in your Webapplication. In my Conclusion I summarized that Webstorage is the only technique that is supported my all major browser, but that it only offers the storeage of simple key-value-pairs.
I believe there is a lot of potential in Webstorage that could be unveiled, if the API for using it would be somewhat more convient. To be more concret: I believe developers would more likely to save and retrieve objects, than to save and retrieve key-value-pairs. Because of that I developed the small Javascript-Framework "localy.js". It is a lightweighted wrapper around Webstorage, which makes Client-Side-Storage more convenient.
How to use it
It has no depencies whatsover. Just include this at the end of your webpage (but obviously before the Code, that relies on this Framework):
<script type="text/javascript" src="/js/storage.js"></script>
Now, imagine you want to store a Student-Object:
// create and save a new Student
var student = new LocalyObject("Student");
student .firstname = "Peter";
student.lastname = "Pan";
student.age = 12;
student.save();
If you want to retrieve all Students, just do this:
var localy = new Localy();
var students = localy.getObjects('Student');
for (var i = 0; i < students.length; i++) {
var student = students[i];
console.log(student.firstname + " " + student.lastname + " is " + student.age + " years old!");
}
How does it work
storage.js uses Webstorage to save all objects in a similiar way on how the Entity-Attribute-Value-Model works like. So the Student-Object in the example above is saved with the following key-value-pairs:
"Student" => "exists"
"Student_properties" => "name||age"
"Student_1_firstname" => "Peter"
"Student_1_lastname" => "Pan"
"Student_1_age" => "12"
The first two key-value-pairs are for describing the "Class" Student itself and are just stored once for each different class.
Use it and give me Feedback
It has no depencies whatsover, and it is licensed under the MIT-License. You can find it at Github https://github.com/paskster/localy.js. If you use it, please give me Feedback. Especially Cross-Browser-Issues, other Bug-Reports and Suggestions to enhance this Framework are very welcome.
Furter Enhancements
Therere are several shortcomings that I will work on in the next couple of weeks:
1.) Keep track of the type of the properties. Like:
"Student_name" => "String";
"Student_age" => "Number"
2.) If an objects contains other objects, save them all and keep track of them. Like:
"Student_1_Teacher" => "Teacher_2";
"Student_Teacher" => "Object";
3.) Save functions as well. Like:
"Student_getAge" => "function";
"Student_getAge_implementation" => "return this.firstname + ' ' + this.lastname";
4.) Reduce the global Footprint and make in even easier to use. Right now we have two global variables "Localy" and "LocalyObject". I will work on that.
In my last post I talked about the different ways of how you can implement Client-Side-Storage in your Webapplication. In my Conclusion I summarized that Webstorage is the only technique that is supported my all major browser, but that it only offers the storeage of simple key-value-pairs.
I believe there is a lot of potential in Webstorage that could be unveiled, if the API for using it would be somewhat more convient. To be more concret: I believe developers would more likely to save and retrieve objects, than to save and retrieve key-value-pairs. Because of that I developed the small Javascript-Framework "localy.js". It is a lightweighted wrapper around Webstorage, which makes Client-Side-Storage more convenient.
How to use it
It has no depencies whatsover. Just include this at the end of your webpage (but obviously before the Code, that relies on this Framework):
<script type="text/javascript" src="/js/storage.js"></script>
Now, imagine you want to store a Student-Object:
// create and save a new Student
var student = new LocalyObject("Student");
student .firstname = "Peter";
student.lastname = "Pan";
student.age = 12;
student.save();
If you want to retrieve all Students, just do this:
var localy = new Localy();
var students = localy.getObjects('Student');
for (var i = 0; i < students.length; i++) {
var student = students[i];
console.log(student.firstname + " " + student.lastname + " is " + student.age + " years old!");
}
How does it work
storage.js uses Webstorage to save all objects in a similiar way on how the Entity-Attribute-Value-Model works like. So the Student-Object in the example above is saved with the following key-value-pairs:
"Student" => "exists"
"Student_properties" => "name||age"
"Student_1_firstname" => "Peter"
"Student_1_lastname" => "Pan"
"Student_1_age" => "12"
The first two key-value-pairs are for describing the "Class" Student itself and are just stored once for each different class.
Use it and give me Feedback
It has no depencies whatsover, and it is licensed under the MIT-License. You can find it at Github https://github.com/paskster/localy.js. If you use it, please give me Feedback. Especially Cross-Browser-Issues, other Bug-Reports and Suggestions to enhance this Framework are very welcome.
Furter Enhancements
Therere are several shortcomings that I will work on in the next couple of weeks:
1.) Keep track of the type of the properties. Like:
"Student_name" => "String";
"Student_age" => "Number"
2.) If an objects contains other objects, save them all and keep track of them. Like:
"Student_1_Teacher" => "Teacher_2";
"Student_Teacher" => "Object";
3.) Save functions as well. Like:
"Student_getAge" => "function";
"Student_getAge_implementation" => "return this.firstname + ' ' + this.lastname";
4.) Reduce the global Footprint and make in even easier to use. Right now we have two global variables "Localy" and "LocalyObject". I will work on that.
