Javascript：localstorageのストア機能

Question

これはlocalstorageに挿入することは可能ですか、これを格納する別の方法はありますか？

$('#pass_to_score').on('click',function(){ 

var compressed = function(){ 
    $('.whole_wrap_of_editcriteria').css('display','none'); 
    $('#wrappler').css('display','block'); 
    $('#li_addcriteria').css('display','none'); 
    $('#li_menu1').addClass('active'); 
    $('#home').removeClass('active'); 
    $('#menu1').addClass('active'); 
    $('#title_panel').html('Edit criteria scoring'); 
} 
compressed(); 
localStorage.setItem('compressed', compressed()); 
//i also try set as JSON.stringify but its undefined 

}); 

Answer 1

あなたは、私はそれをお勧めしません、というほしいと理由を私は知らないが、あなたはtoStringを使用してそれを行うことができます。

ストアそれ：

var myFunc = function(){ 
    alert('Hello world!'); 
}; 

// Store it as a String 
localStorage.setItem('compressedFunc', myFunc.toString()); 

その後、それを取得：

var compressedFunc = localStorage.getItem('compressedFunc'); 

// Convert the String back to a function 
var myFunc = eval('(' + compressedFunc + ')'); 

// Use it 
myFunc(); 

Answer 2

あなたはJavaScriptでエンコードされた機能を持っている場合は、すでにあなたのように、localStorageから今までそれを復元する必要はないだろうそれを利用できるようにする。

JSONで関数をエンコードすることはできません。関数のソースコードを保存し、取得時にevalを適用することができます。しかし、すべてが知っているように、これはフレーズで捕らえられた特定のリスクを持っています。 "evalは悪です"です。

機能が何をすべきかを詳しく説明するオブジェクト構造を作成する場合は、そのリスクを少しでも制限できます。あなたのケースでは、関数内のすべてのステートメントは、jQueryセレクターに適用されるメソッドです。この次のオブジェクトを表すことができます：

var compressed = [ 
    { selector: '.whole_wrap_of_editcriteria', method: 'css',   args: ['display', 'none'] }, 
    { selector: '#wrappler',     method: 'css',   args: ['display', 'none'] }, 
    { selector: '#li_addcriteria',    method: 'css',   args: ['display','none'] }, 
    { selector: '#li_menu1',     method: 'addClass', args: ['active'] }, 
    { selector: '#home',      method: 'removeClass', args: ['active'] }, 
    { selector: '#menu1',      method: 'addClass', args: ['active'] }, 
    { selector: '#title_panel',    method: 'html',  args: ['Edit criteria scoring'] } 
]; 

その後、あなたの実際の機能を、同じ効果が得られ、その入力として、そのオブジェクトを取り、それを処理することができます：

var applyInstructions = function(instructions) { 
    instructions.forEach(cmd => $(cmd.selector)[cmd.method](...cmd.args)); 
} 

を今、ときにlocalStorageにこの知識を保存したい、あなたは上記のみ構築されたオブジェクトを格納する必要があり、そのような：

// save to localStorage: 
localStorage.setItem('compressed', JSON.stringify(compressed)); 

そして、それを取得した後、あなたはGENERを実行しますその上にIC機能：

// get from localStorage: 
applyInstructions(JSON.parse(localStorage.getItem('compressed'))); 

これはevalを使用してに似ていますが、それはあなたが（applyInstructionsで）実行することができるものに制限を置くことができるという利点があります。例えば、属性が値css,addClass,removeClassおよびhtmlのいずれかであることを確認することができますが、最後の1つは危険な状態になる可能性があります。可能であれば、textContentがより良い選択肢になります。

var applyInstructions = function(instructions) { 
    if (instructions.some( 
      cmd => ['css','addClass','removeClass','textContent'].indexOf(cmd.method)==-1)) { 
     throw "Invalid instructions object"; 
    } 
    instructions.forEach(cmd => $(cmd.selector)[cmd.method](...cmd.args)); 
}