تخزين الكائنات في Localstorage HTML5
-
18-09-2019 - |
سؤال
أرغب في تخزين كائن JavaScript في HTML5 localStorage
, ، ولكن يبدو أن كائني يتم تحويله إلى سلسلة.
يمكنني تخزين واسترداد أنواع الجافا سكريبت البدائية والمصفوفات باستخدام localStorage
, ، ولكن الكائنات لا تبدو تعمل. يجب عليهم؟
إليك الرمز الخاص بي:
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
console.log(' ' + prop + ': ' + testObject[prop]);
}
// Put the object into storage
localStorage.setItem('testObject', testObject);
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);
ناتج وحدة التحكم
typeof testObject: object
testObject properties:
one: 1
two: 2
three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]
يبدو لي مثل setItem
الطريقة هي تحويل المدخلات إلى سلسلة قبل تخزينها.
أرى هذا السلوك في Safari و Chrome و Firefox، لذلك أفترض أنه سوء فهمي HTML5 ويب التخزين المواصفات، وليس علة أو قيود خاصة بالمتصفح.
لقد حاولت فهم استنساخ منظم الخوارزمية الموصوفة في http://www.w3.org/tr/html5/Infrasulture.html.. وبعد لا أفهم تماما ما يقوله، ولكن ربما تكون مشكلتي علاقة بممتلكات كائنتي غير قابلة للتنفيذ (؟؟؟)
هل هناك حل سهل؟
تحديث: غيرت W3C في النهاية عقولهم حول مواصفات استنساخ منظمة، وقررت تغيير المواصفات لتتناسب مع التطبيقات. يرى https://www.w3.org/bugs/public/show_bug.cgi؟id=12111.. وبعد لذلك لم يعد هذا السؤال 100٪ صالحا، لكن الإجابات لا تزال قد تكون ذات أهمية.
المحلول
أنظر إلى تفاحة, موزيلا و موزيلا مرة أخرى وثائق، يبدو أن الوظيفة تقتصر على التعامل مع أزواج مفتاح السلسلة فقط.
يمكن أن يكون الحل البديل باتر كائنك قبل تخزينه، ثم تحليله لاحقا عند استرداده:
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));
نصائح أخرى
تحسن بسيط على البديل:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
بسبب تقييم دائرة قصيرة, getObject()
إرادة فورا إرجاع null
إذا key
ليس في التخزين. كما أنها لن ترمي SyntaxError
استثناء إذا value
يكون ""
(السلسلة الفارغة JSON.parse()
لا يمكن التعامل مع ذلك).
قد تجد أنها مفيدة لتوسيع كائن التخزين مع هذه الطرق المفيدة:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
وبهذه الطريقة تحصل على الوظيفة التي تريدها حقا رغم أنه أسفل API يدعم السلاسل فقط.
تمديد كائن التخزين هو حل رائع. بالنسبة لفي API، قمت بإنشاء واجهة ل LocalStorage ثم تحقق مما إذا كان كائن أم لا أثناء الإعداد والحصول عليه.
var data = {
set: function(key, value) {
if (!key || !value) {return;}
if (typeof value === "object") {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
},
get: function(key) {
var value = localStorage.getItem(key);
if (!value) {return;}
// assume it is an object that has been stringified
if (value[0] === "{") {
value = JSON.parse(value);
}
return value;
}
}
Stringify لا يحل جميع المشاكل
يبدو أن الإجابات هنا لا تغطي جميع الأنواع الممكنة في جافا سكريبت، لذلك فيما يلي بعض الأمثلة القصيرة حول كيفية التعامل معها بشكل صحيح:
//Objects and Arrays:
var obj = {key: "value"};
localStorage.object = JSON.stringify(obj); //Will ignore private members
obj = JSON.parse(localStorage.object);
//Boolean:
var bool = false;
localStorage.bool = bool;
bool = (localStorage.bool === "true");
//Numbers:
var num = 42;
localStorage.num = num;
num = +localStorage.num; //short for "num = parseFloat(localStorage.num);"
//Dates:
var date = Date.now();
localStorage.date = date;
date = new Date(parseInt(localStorage.date));
//Regular expressions:
var regex = /^No\.[\d]*$/i; //usage example: "No.42".match(regex);
localStorage.regex = regex;
var components = localStorage.regex.match("^/(.*)/([a-z]*)$");
regex = new RegExp(components[1], components[2]);
//Functions (not recommended):
function func(){}
localStorage.func = func;
eval( localStorage.func ); //recreates the function with the name "func"
أنا لا أوصي لتخزين الوظائف بسبب eval()
الشرير يمكن أن يؤدي إلى قضايا بشأن الأمن والتحسين والتصحيح. بشكل عام، eval()
لا ينبغي أبدا استخدامها في رمز JavaScript.
أعضاء القطاع الخاص
المشكلة مع استخدام JSON.stringify()
لتخزين الكائنات، أن هذه الوظيفة لا يمكن أن تسلسل أعضاء خاصين. يمكن حل هذه المشكلة عن طريق الكتابة فوق .toString()
الطريقة (التي تسمى ضمنيا عند تخزين البيانات في تخزين الويب):
//Object with private and public members:
function MyClass(privateContent, publicContent){
var privateMember = privateContent || "defaultPrivateValue";
this.publicMember = publicContent || "defaultPublicValue";
this.toString = function(){
return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}';
};
}
MyClass.fromString = function(serialisedString){
var properties = JSON.parse(serialisedString || "{}");
return new MyClass( properties.private, properties.public );
};
//Storing:
var obj = new MyClass("invisible", "visible");
localStorage.object = obj;
//Loading:
obj = MyClass.fromString(localStorage.object);
المراجع الدائرية
مشكلة اخرى stringify
لا يمكن التعامل مع مراجع دائرية:
var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj); //Fails
في هذا المثال، JSON.stringify()
سوف رمي أ TypeError
"تحويل بنية دائرية إلى JSON"وبعد إذا تم دعم تخزين المراجع الدائرية، فإن المعلمة الثانية لل JSON.stringify()
قد تستخدم:
var obj = {id: 1, sub: {}};
obj.sub["circular"] = obj;
localStorage.object = JSON.stringify( obj, function( key, value) {
if( key == 'circular') {
return "$ref"+value.id+"$";
} else {
return value;
}
});
ومع ذلك، يعتمد العثور على حل فعال لتخزين المراجع الدائرية بشكل كبير على المهام التي تحتاج إلى حلها، واستعادة هذه البيانات ليست تافهة أيضا.
هناك بالفعل بعض الأسئلة في التعامل مع هذه المشكلة: خطوات (تحويل إلى JSON) كائن JavaScript مع مرجع دائري
هناك مكتبة رائعة تلتف العديد من الحلول حتى تؤيد حتى المتصفحات القديمة التي تسمى jstorage.
يمكنك تعيين كائن
$.jStorage.set(key, value)
واستردادها بسهولة
value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")
باستخدام كائنات JSON للتخزين المحلي:
//تعيين
var m={name:'Hero',Title:'developer'};
localStorage.setItem('us', JSON.stringify(m));
//احصل على
var gm =JSON.parse(localStorage.getItem('us'));
console.log(gm.name);
/ / التكرار لجميع مفاتيح التخزين المحلية والقيم
for (var i = 0, len = localStorage.length; i < len; ++i) {
console.log(localStorage.getItem(localStorage.key(i)));
}
// حذف
localStorage.removeItem('us');
delete window.localStorage["us"];
من الناحية النظرية، من الممكن تخزين الكائنات مع وظائف:
function store (a)
{
var c = {f: {}, d: {}};
for (var k in a)
{
if (a.hasOwnProperty(k) && typeof a[k] === 'function')
{
c.f[k] = encodeURIComponent(a[k]);
}
}
c.d = a;
var data = JSON.stringify(c);
window.localStorage.setItem('CODE', data);
}
function restore ()
{
var data = window.localStorage.getItem('CODE');
data = JSON.parse(data);
var b = data.d;
for (var k in data.f)
{
if (data.f.hasOwnProperty(k))
{
b[k] = eval("(" + decodeURIComponent(data.f[k]) + ")");
}
}
return b;
}
ومع ذلك، فإن الدالة تسلسل / التحيز غير موثوق بها ل إنه يعتمد على التنفيذ.
يمكنك أيضا تجاوز التخزين الافتراضي setItem(key,value)
و getItem(key)
طرق للتعامل مع الكائنات / صفائف مثل أي نوع بيانات آخر. بهذه الطريقة، يمكنك ببساطة الاتصال localStorage.setItem(key,value)
و localStorage.getItem(key)
كما تفعل عادة.
لم أختبر ذلك على نطاق واسع، لكنه يبدو أنه يعمل دون مشاكل لمشروع صغير كنت العبث به.
Storage.prototype._setItem = Storage.prototype.setItem;
Storage.prototype.setItem = function(key, value)
{
this._setItem(key, JSON.stringify(value));
}
Storage.prototype._getItem = Storage.prototype.getItem;
Storage.prototype.getItem = function(key)
{
try
{
return JSON.parse(this._getItem(key));
}
catch(e)
{
return this._getItem(key);
}
}
وصلت إلى هذا المنشور بعد الضغط على وظيفة أخرى تم إغلاقها كنسخة مكررة من هذا - بعنوان "كيفية تخزين صفيف في LocalStorage؟" وهو ما يرام باستثناء أي موضوع يوفر بالفعل إجابة كاملة حول كيفية الحفاظ على صفيف في Localstorage - ومع ذلك، فقد تمكنت من صياغة حل بناء على المعلومات الواردة في كل من المواضيع.
لذلك إذا كان أي شخص آخر يرغب في أن تكون قادرا على دفع / بوب / تحول عناصر ضمن صفيف، فما يريدون مجموعة مخزنة في Localstorage أو Sessionstorage بالفعل، هنا تذهب:
Storage.prototype.getArray = function(arrayName) {
var thisArray = [];
var fetchArrayObject = this.getItem(arrayName);
if (typeof fetchArrayObject !== 'undefined') {
if (fetchArrayObject !== null) { thisArray = JSON.parse(fetchArrayObject); }
}
return thisArray;
}
Storage.prototype.pushArrayItem = function(arrayName,arrayItem) {
var existingArray = this.getArray(arrayName);
existingArray.push(arrayItem);
this.setItem(arrayName,JSON.stringify(existingArray));
}
Storage.prototype.popArrayItem = function(arrayName) {
var arrayItem = {};
var existingArray = this.getArray(arrayName);
if (existingArray.length > 0) {
arrayItem = existingArray.pop();
this.setItem(arrayName,JSON.stringify(existingArray));
}
return arrayItem;
}
Storage.prototype.shiftArrayItem = function(arrayName) {
var arrayItem = {};
var existingArray = this.getArray(arrayName);
if (existingArray.length > 0) {
arrayItem = existingArray.shift();
this.setItem(arrayName,JSON.stringify(existingArray));
}
return arrayItem;
}
Storage.prototype.unshiftArrayItem = function(arrayName,arrayItem) {
var existingArray = this.getArray(arrayName);
existingArray.unshift(arrayItem);
this.setItem(arrayName,JSON.stringify(existingArray));
}
Storage.prototype.deleteArray = function(arrayName) {
this.removeItem(arrayName);
}
مثال على الاستخدام - تخزين سلاسل بسيطة في صفيف Localstorage:
localStorage.pushArrayItem('myArray','item one');
localStorage.pushArrayItem('myArray','item two');
مثال على استخدام الكائنات في صفيف SessionStorage:
var item1 = {}; item1.name = 'fred'; item1.age = 48;
sessionStorage.pushArrayItem('myArray',item1);
var item2 = {}; item2.name = 'dave'; item2.age = 22;
sessionStorage.pushArrayItem('myArray',item2);
طرق شائعة لمعالجة المصفوفات:
.pushArrayItem(arrayName,arrayItem); -> adds an element onto end of named array
.unshiftArrayItem(arrayName,arrayItem); -> adds an element onto front of named array
.popArrayItem(arrayName); -> removes & returns last array element
.shiftArrayItem(arrayName); -> removes & returns first array element
.getArray(arrayName); -> returns entire array
.deleteArray(arrayName); -> removes entire array from storage
يوصي باستخدام مكتبة تجريد للعديد من الميزات التي تمت مناقشتها هنا وكذلك توافق أفضل. الكثير من الخيارات:
- jstorage. أو simplestorage. << تفضيلاتي
- LocalForage.
- alekseykulikov / التخزين
- كرسي حديقة
- store.js. << خيار جيد آخر
- يا إلهي
من الأفضل أن تقوم باتخاذ وظائف كمدس و Getter التخزين المحلي, وبهذه الطريقة سيكون لديك سيطرة أفضل ولن تضطر إلى تكرار تحليل JSON وجميعها. سوف تعامل حتى (" ") مفتاح سلسلة فارغة / حالة البيانات بسلاسة.
function setItemInStorage(dataKey, data){
localStorage.setItem(dataKey, JSON.stringify(data));
}
function getItemFromStorage(dataKey){
var data = localStorage.getItem(dataKey);
return data? JSON.parse(data): null ;
}
setItemInStorage('user', { name:'tony stark' });
getItemFromStorage('user'); /* return {name:'tony stark'} */
لقد قمت بتعديل إحدى الإجابات أعلى صوتا قليلا. أنا من محبي وجود وظيفة واحدة بدلا من 2 إذا لم تكن هناك حاجة إليها.
Storage.prototype.object = function(key, val) {
if ( typeof val === "undefined" ) {
var value = this.getItem(key);
return value ? JSON.parse(value) : null;
} else {
this.setItem(key, JSON.stringify(val));
}
}
localStorage.object("test", {a : 1}); //set value
localStorage.object("test"); //get value
أيضا، إذا لم يتم تعيين قيمة، فهي تعود null
بدلا من false
. false
لديه بعض المعنى، null
لا.
تحسين إجابة Guria:
Storage.prototype.setObject = function (key, value) {
this.setItem(key, JSON.stringify(value));
};
Storage.prototype.getObject = function (key) {
var value = this.getItem(key);
try {
return JSON.parse(value);
}
catch(err) {
console.log("JSON parse failed for lookup of ", key, "\n error was: ", err);
return null;
}
};
يمكنك استخدام localdatastorage. لتخزين أنواع بيانات JavaScript بشفافية (صفيف، منطقي، تاريخ، تعويم، عدد صحيح، السلسلة والكائن). كما يوفر توضيح بيانات خفيف الوزن، ثم يضغط الأوتار تلقائيا، ويسهل الاستعلام عن طريق المفتاح (الاسم) بالإضافة إلى الاستعلام عن طريق (المفتاح) قيمة (المفتاح)، ويساعد على فرض التخزين المشترك المجسم داخل نفس المجال بواسطة مفاتيح البادئة.
إخلاء المسئولية] أنا مؤلف الأداة المساعدة [/ إخلاء المسئولية
أمثلة:
localDataStorage.set( 'key1', 'Belgian' )
localDataStorage.set( 'key2', 1200.0047 )
localDataStorage.set( 'key3', true )
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localDataStorage.set( 'key5', null )
localDataStorage.get( 'key1' ) --> 'Belgian'
localDataStorage.get( 'key2' ) --> 1200.0047
localDataStorage.get( 'key3' ) --> true
localDataStorage.get( 'key4' ) --> Object {RSK: Array(5)}
localDataStorage.get( 'key5' ) --> null
كما ترون، يتم احترام القيم البدائية.
سيكون هناك خيار آخر لاستخدام البرنامج المساعد الحالي.
علي سبيل المثال persisto. هو مشروع مفتوح المصدر يوفر واجهة سهلة إلى LocalStorage / SessionStorage وأتمتة الثبات لحقول النماذج (المدخلات وأزرار الراديو وصانع الاختيار).
(إخلاء المسئولية: أنا المؤلف.)
يمكنك استخدام ejson. لتخزين الكائنات كسلاسل.
Ejson هو امتداد JSON لدعم المزيد من الأنواع. وهو يدعم جميع أنواع JSON-آمنة، وكذلك:
- تاريخ (جافا سكريبت
Date
)- ثنائي (جافا سكريبت
Uint8Array
أو نتيجة ejson.newbinary.)- أنواع المعرفة من قبل المستخدم (انظر ejson.addype.. وبعد علي سبيل المثال، mongo.objectid. يتم تنفيذه بهذه الطريقة.)
جميع تسلسل Ejson هي أيضا JSON صالحة. على سبيل المثال كائن مع تاريخ وتسليط المخزن المؤقت الثنائي في Ejson على النحو التالي:
{ "d": {"$date": 1358205756553}, "b": {"$binary": "c3VyZS4="} }
هنا هو مجمع بلدي Localstorage باستخدام EJSON
https://github.com/uzitech/storage.js.
أضفت بعض الأنواع إلى غلافي بما في ذلك التعبيرات والوظائف العادية
http://rhaboo.org. هو طبقة سكر محمولة تتيح لك كتابة أشياء مثل هذا:
var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
one: ['man', 'went'],
2: 'mow',
went: [ 2, { mow: ['a', 'meadow' ] }, {} ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');
لا يستخدم json.stringify / تحليل لأن ذلك سيكون غير دقيق وبطء على كائنات كبيرة. بدلا من ذلك، تحتوي كل قيمة الطرفية على إدخال Localstorage الخاص به.
ربما يمكنك تخمين أنني قد يكون لدي ما يجب القيام به مع Laboo ؛-)
أدريان.
قمت بإلغاء غلاف ضئيل آخر مع 20 سطريا فقط للسماح باستخدامه كما هو:
localStorage.set('myKey',{a:[1,2,5], b: 'ok'});
localStorage.has('myKey'); // --> true
localStorage.get('myKey'); // --> {a:[1,2,5], b: 'ok'}
localStorage.keys(); // --> ['myKey']
localStorage.remove('myKey');
للمستخدمين المحبوبين على استعداد لتعيين الخصائص المكتوبة والحصول عليها:
/**
* Silly wrapper to be able to type the storage keys
*/
export class TypedStorage<T> {
public removeItem(key: keyof T): void {
localStorage.removeItem(key);
}
public getItem<K extends keyof T>(key: K): T[K] | null {
const data: string | null = localStorage.getItem(key);
return JSON.parse(data);
}
public setItem<K extends keyof T>(key: K, value: T[K]): void {
const data: string = JSON.stringify(value);
localStorage.setItem(key, data);
}
}
// write an interface for the storage
interface MyStore {
age: number,
name: string,
address: {city:string}
}
const storage: TypedStorage<MyStore> = new TypedStorage<MyStore>();
storage.setItem("wrong key", ""); // error unknown key
storage.setItem("age", "hello"); // error, age should be number
storage.setItem("address", {city:"Here"}); // ok
const address: {city:string} = storage.getItem("address");
هنا بعض النسخة المتغيرة من الرمز المنشور بواسطةDanott
سوف ينفذ أيضا حذف القيمة من LocalStorage ويوضح كيفية إضافة طبقة Getter و Setter لذلك بدلا من
localstorage.setItem(preview, true)
يمكنك كتابة
config.preview = true
حسنا هنا أذهب:
var PT=Storage.prototype
if (typeof PT._setItem >='u') PT._setItem = PT.setItem;
PT.setItem = function(key, value)
{
if (typeof value >='u')//..ndefined
this.removeItem(key)
else
this._setItem(key, JSON.stringify(value));
}
if (typeof PT._getItem >='u') PT._getItem = PT.getItem;
PT.getItem = function(key)
{
var ItemData = this._getItem(key)
try
{
return JSON.parse(ItemData);
}
catch(e)
{
return ItemData;
}
}
// Aliases for localStorage.set/getItem
get = localStorage.getItem.bind(localStorage)
set = localStorage.setItem.bind(localStorage)
// Create ConfigWrapperObject
var config = {}
// Helper to create getter & setter
function configCreate(PropToAdd){
Object.defineProperty( config, PropToAdd, {
get: function () { return ( get(PropToAdd) ) },
set: function (val) { set(PropToAdd, val ) }
})
}
//------------------------------
// Usage Part
// Create properties
configCreate('preview')
configCreate('notification')
//...
// Config Data transfer
//set
config.preview = true
//get
config.preview
// delete
config.preview = undefined
حسنا، قد تجر قطاع الأسماء المستعارة .bind(...)
. وبعد ومع ذلك، فقط أضعها لأنه من الجيد حقا أن أعرف عن هذا. لقد أعوذتني على ساعات لمعرفة سبب بسيطة get = localStorage.getItem;
لا تعمل
لقد قمت بشيء لا كسر كائنات التخزين الحالية، لكنه يخلق غلافا حتى تتمكن من فعل ما تريد. والنتيجة هي كائن طبيعي، لا طرق، مع الوصول مثل أي كائن.
إذا كنت تريد 1 localStorage
الممتلكات لتكون السحر:
var prop = ObjectStorage(localStorage, 'prop');
إذا كنت بحاجة إلى عدة:
var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);
كل ما تفعله ل prop
, ، أو الكائنات في داخل storage
سيتم حفظها تلقائيا localStorage
. وبعد كنت تلعب دائما بكائن حقيقي، حتى تتمكن من القيام بالأشياء مثل هذا:
storage.data.list.push('more data');
storage.another.list.splice(1, 2, {another: 'object'});
وكل كائن جديد في داخل سيتم تتبع الكائن المتعقب تلقائيا.
الجانب السلبي الكبير جدا: ذلك يعتمد على Object.observe()
لذلك لديها دعم متصفح محدود للغاية. ولا يبدو الأمر كما لو كان سيأتي إلى فايرفوكس أو حافة في أي وقت قريب.
دعنا نقول أن لديك مجموعة التالية تسمى الأفلام:
var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown",
"Kill Bill", "Death Proof", "Inglourious Basterds"];
باستخدام وظيفة التوخين، يمكن تحويل صفيف أفلامك إلى سلسلة باستخدام بناء الجملة التالي:
localStorage.setItem("quentinTarantino", JSON.stringify(movies));
لاحظ أن بياناتي يتم تخزينها تحت المفتاح يسمى Quentintarantino.
استرجاع بياناتك
var retrievedData = localStorage.getItem("quentinTarantino");
للتحويل من سلسلة إلى كائن، استخدم وظيفة JSON PARSE:
var movies2 = JSON.parse(retrievedData);
يمكنك استدعاء جميع أساليب الصفيف على أفلامك 2
لتخزين كائن، يمكنك إجراء أحرف يمكنك استخدامها للحصول على كائن من سلسلة إلى كائن (قد لا يكون منطقيا). علي سبيل المثال
var obj = {a: "lol", b: "A", c: "hello world"};
function saveObj (key){
var j = "";
for(var i in obj){
j += (i+"|"+obj[i]+"~");
}
localStorage.setItem(key, j);
} // Saving Method
function getObj (key){
var j = {};
var k = localStorage.getItem(key).split("~");
for(var l in k){
var m = k[l].split("|");
j[m[0]] = m[1];
}
return j;
}
saveObj("obj"); // undefined
getObj("obj"); // {a: "lol", b: "A", c: "hello world"}
ستتسبب هذه التقنية في بعض مواطن الخلل إذا كنت تستخدم الرسالة التي استخدمتها لتقسيم الكائن، كما أنها تجريبية للغاية.
مثال صغير على مكتبة تستخدم LocalStorage لتتبع الرسائل المستلمة من جهات الاتصال:
// This class is supposed to be used to keep a track of received message per contacts.
// You have only four methods:
// 1 - Tells you if you can use this library or not...
function isLocalStorageSupported(){
if(typeof(Storage) !== "undefined" && window['localStorage'] != null ) {
return true;
} else {
return false;
}
}
// 2 - Give the list of contacts, a contact is created when you store the first message
function getContacts(){
var result = new Array();
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
result.push(localStorage.key(i));
}
return result;
}
// 3 - store a message for a contact
function storeMessage(contact, message){
var allMessages;
var currentMessages = localStorage.getItem(contact);
if(currentMessages == null){
var newList = new Array();
newList.push(message);
currentMessages = JSON.stringify(newList);
}
else
{
var currentList =JSON.parse(currentMessages);
currentList.push(message);
currentMessages = JSON.stringify(currentList);
}
localStorage.setItem(contact, currentMessages);
}
// 4 - read the messages of a contact
function readMessages(contact){
var result = new Array();
var currentMessages = localStorage.getItem(contact);
if(currentMessages != null){
result =JSON.parse(currentMessages);
}
return result;
}
LocalStorage يمكن فقط تخزين أزواج القيمة الرئيسية حيث كل من المفاتيح والقيم يجب أن تكون سلاسل. وبعد ومع ذلك، يمكنك تخزين الكائن عن طريق تسلسلها JSON
الأوتار ثم التحيز بهم إلى كائنات JS عند استردادها.
علي سبيل المثال:
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// JSON.stringify turns a JS object into a JSON string, thus we can store it
localStorage.setItem('testObject', JSON.stringify(testObject));
// After we recieve a JSON string we can parse it into a JS object using JSON.parse
var jsObject = JSON.parse(localStorage.getItem('testObject'));
كن على دراية بحقيقة أن هذا سيزيل سلسلة النموذج الأولي المنشأ. يظهر هذا بشكل أفضل عبر مثال:
function testObject () {
this.one = 1;
this.two = 2;
this.three = 3;
}
testObject.prototype.hi = 'hi';
var testObject1 = new testObject();
// logs the string hi, derived from prototype
console.log(testObject1.hi);
// the prototype of testObject1 is testObject.prototype
console.log(Object.getPrototypeOf(testObject1));
// stringify and parse the js object, will result in a normal JS object
var parsedObject = JSON.parse(JSON.stringify(testObject1));
// the newly created object now has Object.prototype as its prototype
console.log(Object.getPrototypeOf(parsedObject) === Object.prototype);
// no longer is testObject the prototype
console.log(Object.getPrototypeOf(parsedObject) === testObject.prototype);
// thus we cannot longer access the hi property since this was on the prototype
console.log(parsedObject.hi); // undefined
لدي كائن JS هذا * أريد تخزين هذا في HTML5 التخزين المحلي
todosList = [
{ id: 0, text: "My todo", finished: false },
{ id: 1, text: "My first todo", finished: false },
{ id: 2, text: "My second todo", finished: false },
{ id: 3, text: "My third todo", finished: false },
{ id: 4, text: "My 4 todo", finished: false },
{ id: 5, text: "My 5 todo", finished: false },
{ id: 6, text: "My 6 todo", finished: false },
{ id: 7, text: "My 7 todo", finished: false },
{ id: 8, text: "My 8 todo", finished: false },
{ id: 9, text: "My 9 todo", finished: false }
];
أنا استطيع متجر هذا في HTML5 التخزين المحلي بهذه الطريقة، باستخدام json.stringify.
localStorage.setItem("todosObject", JSON.stringify(todosList));
والآن يمكنني الحصول على هذا الكائن من التخزين المحلي json.parsing..
todosList1 = JSON.parse(localStorage.getItem("todosObject"));
console.log(todosList1);
loop toyt localstorage.
var retrievedData = localStorage.getItem("MyCart");
retrievedData.forEach(function (item) {
console.log(item.itemid);
});