javascript - HTML5 স্থানীয় স্টোরেজ বস্তু সংরক্ষণ




local-storage (18)

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() ব্যবহার করে JSON.stringify() হল যে এই ফাংশনটি ব্যক্তিগত সদস্যদের সিরিয়ালাইজ করতে পারে না। এই সমস্যাটি .toString() পদ্ধতি (যা ওয়েব সঞ্চয়স্থানে ডেটা সঞ্চয় করার সময় নিখুঁতভাবে বলা হয় .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() একটি JSON.stringify() "রূপান্তর বিজ্ঞপ্তি গঠনকে 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 রূপান্তর)

আমি 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 দেখে মনে হচ্ছে setItem পদ্ধতিটি সঞ্চয় করার আগে setItem একটি স্ট্রিং রূপান্তর করছে।

আমি সাফারি, ক্রোম এবং ফায়ারফক্সে এই আচরণটি দেখেছি, তাই আমি মনে করি এটি HTML5 ওয়েব সংগ্রহস্থলের বৈশিষ্ট্যের আমার ভুল বোঝাবুঝি নয়, ব্রাউজার নির্দিষ্ট বাগ বা সীমাবদ্ধতা নয়।

আমি http://www.w3.org/TR/html5/infrastructure.html বর্ণিত কাঠামোগত ক্লোন অ্যালগরিদমটির অনুভূতি তৈরি করার চেষ্টা করেছি। আমি যা বলছি তা পুরোপুরি বুঝতে পারছি না, তবে আমার সমস্যাটি আমার বস্তুর বৈশিষ্ট্যগুলির সাথে সম্পৃক্ত হওয়া উচিত নয় (???)

একটি সহজ workaround আছে?

হালনাগাদ: W3C অবশেষে কাঠামোগত-ক্লোন স্পেসিফিকেশন সম্পর্কে তাদের মন পরিবর্তন করেছে, এবং বাস্তবায়নের সাথে মিলিয়ে স্পেক পরিবর্তন করার সিদ্ধান্ত নিয়েছে। https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111 দেখুন। তাই এই প্রশ্নটি 100% বৈধ নয়, তবে উত্তর এখনও আগ্রহের হতে পারে।


@ গুরিয়া এর উত্তরের উন্নতিঃ

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

অন্য বিকল্প একটি বিদ্যমান প্লাগইন ব্যবহার করা হবে।

উদাহরণস্বরূপ persisto একটি ওপেন সোর্স প্রকল্প যা স্থানীয় স্টোরেজ / সেশনস্টোরেজের জন্য সহজ ইন্টারফেস সরবরাহ করে এবং ফর্ম ক্ষেত্রগুলির জন্য স্থিরতা স্বয়ংক্রিয়ভাবে সরবরাহ করে (ইনপুট, রেডিও বোতাম এবং চেকবক্সগুলি)।

(অস্বীকৃতি: আমি লেখক।)


আপনি localDataStorage জাভাস্ক্রিপ্ট ডেটা প্রকারগুলি সংরক্ষণ করতে localDataStorage ব্যবহার করতে পারেন (অ্যারে, বুলিয়ান, তারিখ, ফ্লোট, ইন্টিগ্রার, স্ট্রিং এবং অবজেক্ট)। এটি লাইটওয়েট ডেটা obfuscation প্রদান করে, স্বয়ংক্রিয়ভাবে স্ট্রিং সংকুচিত করে, কী (নাম) দ্বারা অনুসন্ধান করে এবং কী (ক্যোয়ারী) মান দ্বারা অনুসন্ধান করে তোলে, এবং একই উপরিভাগে সেগডেড ভাগ করা স্টোরেজগুলিকে কী প্রিফিক্সিং করে প্রয়োগ করতে সহায়তা করে।

[Disclaimer] আমি ইউটিলিটি লেখক [/ Disclaimer]

উদাহরণ:

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

আপনি দেখতে পারেন, আদিম মান সম্মান করা হয়।


আপনি ডিফল্ট স্টোরেজ 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);
  }
}

আপনি স্ট্রিং হিসাবে বস্তু সংরক্ষণ করার জন্য ejson ব্যবহার করতে পারেন।

ইজসন আরো ধরনের সমর্থন করার জন্য JSON এর একটি এক্সটেনশান। এটি সমস্ত JSON- নিরাপদ প্রকারের পাশাপাশি:

  • তারিখ (জাভাস্ক্রিপ্ট Date )
  • বাইনারি (জাভাস্ক্রিপ্ট Uint8Array বা Uint8Array এর ফলাফল)
  • ব্যবহারকারী-সংজ্ঞায়িত ধরন ( EJSON.addType । উদাহরণস্বরূপ, Mongo.ObjectID এই ভাবে বাস্তবায়িত হয়।)

সমস্ত EJSON সিরিয়ালাইজেশন বৈধ JSON হয়। উদাহরণস্বরূপ একটি তারিখ এবং একটি বাইনারি বাফারের সাথে একটি বস্তু EJSON এ ক্রমিক করা হবে:

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

এখানে ejson ব্যবহার করে আমার স্থানীয় স্টোরেজ wrapper

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

আমি নিয়মিত এক্সপ্রেশন এবং ফাংশন সহ আমার wrapper কিছু ধরনের যোগ করা


আমি এমন একটি জিনিস তৈরি করেছি যা বিদ্যমান সঞ্চয়স্থান বস্তুগুলি ভাঙ্গে না, তবে একটি মোড়ক তৈরি করে যাতে আপনি যা করতে চান তা করতে পারেন। ফলাফল একটি সাধারণ বস্তু, কোন পদ্ধতি, কোন বস্তুর মত অ্যাক্সেস সহ।

আমি তৈরি জিনিস।

যদি আপনি 1 localStorage সম্পত্তি যাদু হতে চান:

var prop = ObjectStorage(localStorage, 'prop');

আপনি বিভিন্ন প্রয়োজন হলে:

var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);

আপনি যা করতে চান সবকিছু, বা storage ভিতরে বস্তু স্বয়ংক্রিয়ভাবে localStorage storage মধ্যে সংরক্ষিত হবে। আপনি সর্বদা একটি প্রকৃত বস্তুর সাথে খেলছেন, তাই আপনি এটির মতো কাজ করতে পারেন:

storage.data.list.push('more data');
storage.another.list.splice(1, 2, {another: 'object'});

এবং একটি ট্র্যাক বস্তুর ভিতরে প্রত্যেক নতুন বস্তু স্বয়ংক্রিয়ভাবে ট্র্যাক করা হবে।

খুব বড় নেতিবাচক: এটি Object.observe() উপর নির্ভর করে তাই এটিতে খুব সীমিত ব্রাউজার সমর্থন রয়েছে। এবং এটি যেকোনো সময় ফায়ারফক্স বা এজের জন্য আসছে বলে মনে হচ্ছে না।


আমি কোডটি ব্যবহার করার অনুমতি দেওয়ার জন্য কোডের মাত্র ২0 টি লাইনের সাথে আরেকটি সহজলভ্য মোড়ক তৈরি করেছি:

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


একটি variant একটি ছোটখাট উন্নতি:

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 ফিরে আসবে। value যদি "" (খালি স্ট্রিং; JSON.parse() এটি পরিচালনা করতে পারে না তবে এটি একটি JSON.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(...) সঙ্গে aliases অংশ ফালা পারে। তবে আমি এটা ঠিক করেছি কারণ এটি সম্পর্কে জানা সত্যিই ভাল। আমি কেন একটি সহজ get = localStorage.getItem; ঘন্টা LocalStorage.getItem ঘন্টা ঘন্টা get = localStorage.getItem; কাজ করো না


এমন একটি দুর্দান্ত লাইব্রেরি রয়েছে যা অনেকগুলি সমাধান jStorage যাতে এটি jStorage নামে পুরানো ব্রাউজারগুলিকে সমর্থন করে

আপনি একটি বস্তু সেট করতে পারেন

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

যাইহোক, ফাংশন সিরিয়ালাইজেশন / ডিসেরিয়ালাইজেশন অবিশ্বস্ত কারণ এটি বাস্তবায়ন-নির্ভরশীল


স্থানীয় সঞ্চয়স্থান জন্য 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"];

Apple , Mozilla এবং Microsoft ডকুমেন্টেশন এ খুঁজছেন, কার্যকারিতা কেবল স্ট্রিং কী / মান জোড়া যুক্ত করতে সীমিত বলে মনে হয়।

এটি সংরক্ষণ করার আগে আপনার অবজেক্টটি stringify করতে একটি 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));

এই দেখুন

চলুন বলি আপনি সিনেমা নামে নিম্নলিখিত অ্যারে আছে:

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 পার্স ফাংশনটি ব্যবহার করুন:

var movies2 = JSON.parse(retrievedData);

আপনি আপনার সিনেমা 2 এ অ্যারে পদ্ধতি কল করতে পারেন


স্থানীয় স্টোরেজে সেট্টার এবং গেটর হিসাবে আপনি ফাংশনগুলি আরও ভাল করে তুলুন , এইভাবে আপনার আরও ভাল নিয়ন্ত্রণ থাকবে এবং 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'} */

লুটপাট স্থানীয় স্টোরেজ

var retrievedData = localStorage.getItem("MyCart");                 

retrievedData.forEach(function (item) {
   console.log(item.itemid);
});

স্থানীয়, সেশনে, কুকিজের যে ধরনের সমস্যাগুলি আপনি opendb লাইব্রেরি ব্যবহার করতে পারেন সেগুলি এড়াতে আমি মনে করি ..

প্রাক- এই স্নিপেটটি ব্যবহার করে আপনি এটি সমাধান করতে পারেন

// for set object in db
db.local.setJSON("key", {name: "xyz"});  

// for get object form db
db.local.getJSON("key");

https://github.com/pankajbisht/openDB

ওয়েব স্টোরেজ সম্পর্কে আরও বিস্তারিত জানার জন্য আপনি ওয়েব স্টোরেজ নিবন্ধটি পড়তে পারেন ।






local-storage