HTML5 localStorage හි වස්තු ගබඩා කිරීම

මම ජාවාස්ක්‍රිප්ට් වස්තුවක් 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ක්‍රමවේදය ආදානය ගබඩා කිරීමට පෙර එය නූලකට පරිවර්තනය කරයි.

මෙම හැසිරීම සෆාරි, ක්‍රෝම් සහ ෆයර්ෆොක්ස් වල මම දකිමි, එබැවින් එය HTML5 වෙබ් ආචයන පිරිවිතර පිළිබඳ මගේ වරදවා වටහා ගැනීම මිස බ්‍රව්සරයට විශේෂිත වූ දෝෂයක් හෝ සීමාවක් නොවේ.

Http://www.w3.org/TR/html5/infrastructure.html හි විස්තර කර ඇති ව්‍යුහාත්මක ක්ලෝන ඇල්ගොරිතම පිළිබඳ අවබෝධයක් ලබා ගැනීමට මම උත්සාහ කර ඇත්තෙමි. . එය පවසන දේ මට සම්පූර්ණයෙන් තේරෙන්නේ නැත, නමුත් සමහර විට මගේ ගැටලුවට මගේ වස්තුවේ ගුණාංග ගණන් නොගැනීම සමඟ සම්බන්ධ විය හැකිය (???)

පහසු විසඳුමක් තිබේද?

යාවත්කාලීන කිරීම: W3C අවසානයේ ව්‍යුහාත්මක-ක්ලෝන පිරිවිතර පිළිබඳ ඔවුන්ගේ මනස වෙනස් කළ අතර ක්‍රියාත්මක කිරීම් වලට ගැලපෙන පරිදි පිරිවිතර වෙනස් කිරීමට තීරණය කළේය. Https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111 බලන්න . එබැවින් මෙම ප්‍රශ්නය තවදුරටත් 100% වලංගු නොවේ, නමුත් පිළිතුරු තවමත් උනන්දුවක් දැක්විය හැකිය.

ඇපල් , මොසිල්ලා සහ මොසිල්ලා යළිත් ප්‍රලේඛනය දෙස බලන විට , ක්‍රියාකාරීත්වය යතුරු යතුරු / අගය යුගල පමණක් හැසිරවීමට සීමා වී ඇති බව පෙනේ.

සලසන වක් මගක් විය හැකි stringify එය ගබඩා කිරීමට පෙර ඔබගේ වස්තුව, සහ ඔබ ඒ ලබාගැනීම විට පසුව එය විග්රහ කළ:

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 සඳහා, මම 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() ජාවාස්ක්‍රිප්ට් කේතයේ කිසි විටෙක භාවිතා නොකළ යුතුය.

පෞද්ගලික සාමාජිකයන්

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;
    }
});

කෙසේ වෙතත්, රවුම් යොමු ගබඩා කිරීම සඳහා කාර්යක්ෂම විසඳුමක් සොයා ගැනීම විසඳිය යුතු කාර්යයන් මත බෙහෙවින් රඳා පවතින අතර එවැනි දත්ත ප්‍රතිෂ් oring ාපනය කිරීම ද සුළුපටු නොවේ.

මෙම ගැටළුව සම්බන්ධයෙන් SO සම්බන්ධයෙන් දැනටමත් යම් ප්‍රශ්නයක් තිබේ: රවුම් යොමු සහිත JavaScript වස්තුවක් Stringify (JSON බවට පරිවර්තනය කරන්න)

බොහෝ විසඳුම් ආවරණය කරන විශිෂ්ට පුස්තකාලයක් ඇත, එබැවින් එය පැරණි බ්‍රව්සර් සඳහා පවා සහාය වේ

ඔබට වස්තුවක් සැකසිය හැකිය

$.jStorage.set(key, value)

එය පහසුවෙන් ලබා ගන්න

value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")

න්‍යාය අනුව, ශ්‍රිත සමඟ වස්තු ගබඩා කළ හැකිය:

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;
}

කෙසේ වෙතත්, ක්‍රියාකාරී අනුක්‍රමිකකරණය / ආශ්‍රිතකරණය විශ්වාස කළ නොහැකි වන්නේ එය ක්‍රියාත්මක කිරීම මත රඳා පවතින බැවිනි.

මම මෙම තනතුරට පැමිණියේ මෙහි අනුපිටපතක් ලෙස වසා දමා ඇති තවත් පෝස්ට් එකකට පහර දීමෙන් පසුවය - එහි මාතෘකාව 'දේශීය ගබඩාවේ අරා ගබඩා කරන්නේ කෙසේද?'. දේශීය ගබඩාව තුළ ඔබට අරාව පවත්වා ගෙන යන්නේ කෙසේද යන්න පිළිබඳ සම්පූර්ණ පිළිතුරක් නූල් දෙකම හැරෙන්නට හැර, එය හොඳයි - කෙසේ වෙතත්, නූල් දෙකේම අඩංගු තොරතුරු මත පදනම්ව විසඳුමක් සැකසීමට මම සමත් වී සිටිමි.

එබැවින් වෙනත් අයෙකුට අරාව තුළ අයිතම තල්ලු කිරීමට / පොප් කිරීමට / මාරු කිරීමට අවශ්‍ය නම්, ඔවුන්ට අවශ්‍ය වන්නේ එම අරාව දේශීය ගබඩාවේ හෝ සැබවින්ම සැසි ස්ටෝරේජ් තුළ ගබඩා කර තැබීමට නම්, මෙන්න ඔබ යන්නේ:

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.pushArrayItem('myArray','item one');
localStorage.pushArrayItem('myArray','item two');

උදාහරණ භාවිතය - සැසි ස්ටෝරේජ් අරාව තුළ වස්තු ගබඩා කිරීම:

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 << තවත් හොඳ විකල්පයක්
• OMG

ඔබට localDataStorage භාවිතා කළ හැකියජාවාස්ක්‍රිප්ට් දත්ත වර්ග (අරාව, බූලියන්, දිනය, පාවෙන, පූර්ණ සංඛ්‍යා, සහ වස්තුව) විනිවිද පෙනෙන ලෙස ගබඩා කිරීමට . එය සැහැල්ලු දත්ත අපැහැදිලි කිරීමක් සපයයි, ස්වයංක්‍රීයව නූල් සම්පීඩනය කරයි, යතුර (නම) මගින් විමසීමට පහසුකම් සපයයි (යතුරු) අගය අනුව විමසීමට පහසුකම් සපයයි, සහ යතුරු උපසර්ග කිරීමෙන් එකම වසම තුළ කොටස් බෙදාගත් ගබඩාව බලාත්මක කිරීමට උපකාරී වේ.

[වියාචනය] මම උපයෝගීතාවයේ කර්තෘ වෙමි [/ වියාචනය]

උදාහරණ:

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

ඔබට පෙනෙන පරිදි, ප්‍රාථමික අගයන් ගරු කරනු ලැබේ.

තවත් විකල්පයක් වනුයේ පවතින ප්ලගිනයක් භාවිතා කිරීමයි.

උදාහරණයක් ලෙස පර්සිස්ටෝ යනු විවෘත මූලාශ්‍ර ව්‍යාපෘතියක් වන අතර එය දේශීය ස්ටෝරේජ් / සැසි ස්ටෝරේජ් සඳහා පහසු අතුරු මුහුණතක් සපයන අතර ආකෘති ක්ෂේත්‍ර සඳහා (ආදානය, ගුවන්විදුලි බොත්තම් සහ පිරික්සුම් කොටු) අඛණ්ඩතාව ස්වයංක්‍රීය කරයි.

(වියාචනය: මම තමයි කර්තෘ.)

වස්තූන් නූල් ලෙස ගබඩා කිරීමට ඔබට ඊජ්සන් භාවිතා කළ හැකිය .

EJSON යනු තවත් වර්ග සඳහා සහය දැක්වීම සඳහා JSON හි දිගුවකි. එය සියලුම JSON- ආරක්ෂිත වර්ග සඳහා සහය දක්වයි,

• දිනය (ජාවාස්ක්‍රිප්ට් Date)
• ද්විමය (JavaScript Uint8Arrayහෝ EJSON.newBinary හි ප්‍රති result ලය )
• පරිශීලක-නිර්වචනය කළ වර්ග ( EJSON.addType බලන්න . නිදසුනක් ලෙස, මොන්ගෝ.ඔබෙක්ට් අයිඩී මේ ආකාරයෙන් ක්‍රියාත්මක වේ.)

සියලුම EJSON අනුක්‍රමිකකරණයන් ද වලංගු JSON වේ. උදාහරණයක් ලෙස දිනයක් සහ ද්විමය බෆරයක් සහිත වස්තුවක් EJSON හි අනුක්‍රමික වනු ඇත:

{
  "d": {"$date": 1358205756553},
  "b": {"$binary": "c3VyZS4="}
}

මෙන්න මගේ දේශීය ස්ටෝරේජ් එතීම එජ්සන් භාවිතා කරයි

https://github.com/UziTech/storage.js

නිත්‍ය ප්‍රකාශන සහ ක්‍රියාකාරකම් ඇතුළුව මම මගේ එතීමට සමහර වර්ග එකතු කළෙමි

String නොමැතිව ඔබට යතුරු අගය ගබඩා කළ නොහැක ආකෘතියකින් .

LocalStorage යතුර / අගය සඳහා සංගීත ආකෘතියට පමණක් සහාය දක්වයි.

ඔබේ දත්ත අරාව හෝ වස්තුව කුමක් වුවත් එය නූල් බවට පරිවර්තනය කළ යුත්තේ එබැවිනි .

LocalStorage හි දත්ත ගබඩා කිරීම සඳහා පළමුව එය JSON.stringify () ක්‍රමය භාවිතා කර තද කරන්න .

var myObj = [{name:"test", time:"Date 2017-02-03T08:38:04.449Z"}];
localStorage.setItem('item', JSON.stringify(myObj));

ඔබට දත්ත ලබා ගැනීමට අවශ්‍ය වූ විට, ඔබ නැවත වස්තුවට නූල් විග්‍රහ කළ යුතුය.

var getObj = JSON.parse(localStorage.getItem('item'));

එය උපකාරී වේ යැයි සිතමි.

කේත පේළි 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');

https://github.com/zevero/simpleWebstorage

යතුරු ලියනය කළ පරිශීලකයින් සඳහා යතුරු ලියනය කළ ගුණාංග සැකසීමට සහ ලබා ගැනීමට කැමති:

/**
 * 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");

https://github.com/adrianmay/rhaboo යනු දේශීය ස්ටෝරේජ් සීනි ස්ථරයක් වන අතර එය ඔබට මෙවැනි දේ ලිවීමට ඉඩ දෙයි:

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 / parse භාවිතා නොකරයි, මන්ද එය විශාල වස්තූන් මත සාවද්‍ය හා මන්දගාමී වනු ඇත. ඒ වෙනුවට, සෑම පර්යන්ත අගයකටම එයටම ආවේණික දේශීය ගබඩා ප්‍රවේශයක් ඇත.

රබූ සමඟ මට යමක් කළ හැකි යැයි ඔබට අනුමාන කළ හැකිය.

@ ඩැනොට් විසින් පළ කරන ලද කේතයේ යම් දුරකට අනුවාදය මෙන්න

එය දේශීය ගබඩාවෙන් මකාදැමීමේ අගය ද ක්‍රියාත්මක කරන අතර ඒ වෙනුවට ගෙටර් සහ සෙටර් ස්තරයක් එකතු කරන්නේ කෙසේදැයි පෙන්වයි

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;වැඩ නොකරන්නේ මන්දැයි දැන ගැනීමට මම මට පැය ගණනක් ගත කළෙමි

මම දැනට පවතින ආචයන වස්තු බිඳ නොදමන දෙයක් සෑදුවෙමි, නමුත් ඔබට අවශ්‍ය දේ කිරීමට හැකි වන පරිදි එතුම නිර්මාණය කරයි. ප්‍රති result ලය සාමාන්‍ය වස්තුවකි, ක්‍රම නොමැත, ඕනෑම වස්තුවක් මෙන් ප්‍රවේශය ඇත.

මම හදපු දේ.

ඔබට localStorageදේපළ 1 ක් මැජික් වීමට අවශ්‍ය නම් :

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 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"}

ඔබ වස්තුව බෙදීමට භාවිතා කළ අකුර භාවිතා කරන්නේ නම් මෙම තාක්ෂණය සමහර දෝෂ ඇති කරයි, එය ද ඉතා පර්යේෂණාත්මක ය.

චක්‍රීය යොමු ඇති වස්තූන් සමඟ එය ක්‍රියාත්මක කිරීමට මම ක්‍රමයක් සොයා ගතිමි.

චක්‍රීය යොමු කිරීම් සහිත වස්තුවක් කරමු.

obj = {
    L: {
        L: { v: 'lorem' },
        R: { v: 'ipsum' }
    },
    R: {
        L: { v: 'dolor' },
        R: {
            L: { v: 'sit' },
            R: { v: 'amet' }
        }
    }
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;

JSON.stringifyචක්‍රලේඛ යොමු කිරීම් නිසා අපට මෙහි කළ නොහැක .

LOCALSTORAGE.CYCLICJSONඇත .stringifyසහ .parseපමණක් සාමාන්ය වගේ JSON, නමුත් චක්රලේඛය යොමු වස්තු සමග ක්රියා කරයි. ("වැඩ" යන්නෙහි අර්ථය විග්‍රහ කිරීම (stringify (obj)) සහ obj ගැඹුරු සමාන වන අතර සමාන 'අභ්‍යන්තර සමානතා' කට්ටල ඇත)

නමුත් අපට කෙටිමං භාවිතා කළ හැකිය:

LOCALSTORAGE.setObject('latinUncles', obj)
recovered = LOCALSTORAGE.getObject('latinUncles')

එවිට, recoveredපහත දැක්වෙන අර්ථයෙන්, obj ට "සමාන" වනු ඇත:

[
obj.L.L.v === recovered.L.L.v,
obj.L.R.v === recovered.L.R.v,
obj.R.L.v === recovered.R.L.v,
obj.R.R.L.v === recovered.R.R.L.v,
obj.R.R.R.v === recovered.R.R.R.v,
obj.R.L.uncle === obj.L,
obj.R.R.uncle === obj.L,
obj.R.R.L.uncle === obj.R.L,
obj.R.R.R.uncle === obj.R.L,
obj.L.L.uncle === obj.R,
obj.L.R.uncle === obj.R,
recovered.R.L.uncle === recovered.L,
recovered.R.R.uncle === recovered.L,
recovered.R.R.L.uncle === recovered.R.L,
recovered.R.R.R.uncle === recovered.R.L,
recovered.L.L.uncle === recovered.R,
recovered.L.R.uncle === recovered.R
]

මෙන්න ක්රියාත්මක කිරීම LOCALSTORAGE

LOCALSTORAGE = (function(){
  "use strict";
  var ignore = [Boolean, Date, Number, RegExp, String];
  function primitive(item){
    if (typeof item === 'object'){
      if (item === null) { return true; }
      for (var i=0; i<ignore.length; i++){
        if (item instanceof ignore[i]) { return true; }
      }
      return false;
    } else {
      return true;
    }
  }
  function infant(value){
    return Array.isArray(value) ? [] : {};
  }
  function decycleIntoForest(object, replacer) {
    if (typeof replacer !== 'function'){
      replacer = function(x){ return x; }
    }
    object = replacer(object);
    if (primitive(object)) return object;
    var objects = [object];
    var forest  = [infant(object)];
    var bucket  = new WeakMap(); // bucket = inverse of objects 
    bucket.set(object, 0);    
    function addToBucket(obj){
      var result = objects.length;
      objects.push(obj);
      bucket.set(obj, result);
      return result;
    }
    function isInBucket(obj){ return bucket.has(obj); }
    function processNode(source, target){
      Object.keys(source).forEach(function(key){
        var value = replacer(source[key]);
        if (primitive(value)){
          target[key] = {value: value};
        } else {
          var ptr;
          if (isInBucket(value)){
            ptr = bucket.get(value);
          } else {
            ptr = addToBucket(value);
            var newTree = infant(value);
            forest.push(newTree);
            processNode(value, newTree);
          }
          target[key] = {pointer: ptr};
        }
      });
    }
    processNode(object, forest[0]);
    return forest;
  };
  function deForestIntoCycle(forest) {
    var objects = [];
    var objectRequested = [];
    var todo = [];
    function processTree(idx) {
      if (idx in objects) return objects[idx];
      if (objectRequested[idx]) return null;
      objectRequested[idx] = true;
      var tree = forest[idx];
      var node = Array.isArray(tree) ? [] : {};
      for (var key in tree) {
        var o = tree[key];
        if ('pointer' in o) {
          var ptr = o.pointer;
          var value = processTree(ptr);
          if (value === null) {
            todo.push({
              node: node,
              key: key,
              idx: ptr
            });
          } else {
            node[key] = value;
          }
        } else {
          if ('value' in o) {
            node[key] = o.value;
          } else {
            throw new Error('unexpected')
          }
        }
      }
      objects[idx] = node;
      return node;
    }
    var result = processTree(0);
    for (var i = 0; i < todo.length; i++) {
      var item = todo[i];
      item.node[item.key] = objects[item.idx];
    }
    return result;
  };
  var console = {
    log: function(x){
      var the = document.getElementById('the');
      the.textContent = the.textContent + '\n' + x;
	},
	delimiter: function(){
      var the = document.getElementById('the');
      the.textContent = the.textContent +
		'\n*******************************************';
	}
  }
  function logCyclicObjectToConsole(root) {
    var cycleFree = decycleIntoForest(root);
    var shown = cycleFree.map(function(tree, idx) {
      return false;
    });
    var indentIncrement = 4;
    function showItem(nodeSlot, indent, label) {
      var leadingSpaces = ' '.repeat(indent);
      var leadingSpacesPlus = ' '.repeat(indent + indentIncrement);
      if (shown[nodeSlot]) {
        console.log(leadingSpaces + label + ' ... see above (object #' + nodeSlot + ')');
      } else {
        console.log(leadingSpaces + label + ' object#' + nodeSlot);
        var tree = cycleFree[nodeSlot];
        shown[nodeSlot] = true;
        Object.keys(tree).forEach(function(key) {
          var entry = tree[key];
          if ('value' in entry) {
            console.log(leadingSpacesPlus + key + ": " + entry.value);
          } else {
            if ('pointer' in entry) {
              showItem(entry.pointer, indent + indentIncrement, key);
            }
          }
        });
      }
    }
	console.delimiter();
    showItem(0, 0, 'root');
  };
  function stringify(obj){
    return JSON.stringify(decycleIntoForest(obj));
  }
  function parse(str){
    return deForestIntoCycle(JSON.parse(str));
  }
  var CYCLICJSON = {
    decycleIntoForest: decycleIntoForest,
    deForestIntoCycle : deForestIntoCycle,
    logCyclicObjectToConsole: logCyclicObjectToConsole,
    stringify : stringify,
    parse : parse
  }
  function setObject(name, object){
    var str = stringify(object);
    localStorage.setItem(name, str);
  }
  function getObject(name){
    var str = localStorage.getItem(name);
    if (str===null) return null;
    return parse(str);
  }
  return {
    CYCLICJSON : CYCLICJSON,
    setObject  : setObject,
    getObject  : getObject
  }
})();
obj = {
	L: {
		L: { v: 'lorem' },
		R: { v: 'ipsum' }
	},
	R: {
		L: { v: 'dolor' },
		R: {
			L: { v: 'sit' },
			R: { v: 'amet' }
		}
	}
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;

// LOCALSTORAGE.setObject('latinUncles', obj)
// recovered = LOCALSTORAGE.getObject('latinUncles')
// localStorage not available inside fiddle ):
LOCALSTORAGE.CYCLICJSON.logCyclicObjectToConsole(obj)
putIntoLS = LOCALSTORAGE.CYCLICJSON.stringify(obj);
recovered = LOCALSTORAGE.CYCLICJSON.parse(putIntoLS);
LOCALSTORAGE.CYCLICJSON.logCyclicObjectToConsole(recovered);

var the = document.getElementById('the');
the.textContent = the.textContent + '\n\n' +
JSON.stringify(
[
obj.L.L.v === recovered.L.L.v,
obj.L.R.v === recovered.L.R.v,
obj.R.L.v === recovered.R.L.v,
obj.R.R.L.v === recovered.R.R.L.v,
obj.R.R.R.v === recovered.R.R.R.v,
obj.R.L.uncle === obj.L,
obj.R.R.uncle === obj.L,
obj.R.R.L.uncle === obj.R.L,
obj.R.R.R.uncle === obj.R.L,
obj.L.L.uncle === obj.R,
obj.L.R.uncle === obj.R,
recovered.R.L.uncle === recovered.L,
recovered.R.R.uncle === recovered.L,
recovered.R.R.L.uncle === recovered.R.L,
recovered.R.R.R.uncle === recovered.R.L,
recovered.L.L.uncle === recovered.R,
recovered.L.R.uncle === recovered.R
]
)

<pre id='the'></pre>

localStorage.setItem ('පරිශීලක', JSON.stringify (පරිශීලක));

ඉන්පසු එය ගබඩාවෙන් ලබාගෙන නැවත වස්තුවක් බවට පරිවර්තනය කිරීම සඳහා:

var user = JSON.parse (localStorage.getItem ('user'));

අපට ගබඩාවේ සියලුම ඇතුළත් කිරීම් මකා දැමීමට අවශ්‍ය නම් අපට කළ හැක්කේ:

localStorage.clear ();