Добавление localstorage в несколько текстовых полей и вводов

Я работаю над проектом с несколькими текстовыми областями, которые будут доступны для других.Добавление localstorage в несколько текстовых полей и вводов

Я начал использовать localstorage, чтобы разрешить сохранение введенного содержимого в браузере.

Это прекрасно работает, но я могу заставить его работать только в одной текстовой области документа. Я знаю, это означает, что мне нужно будет дублировать и переименовывать какой-то аспект JS-кода, но я затрудняюсь после нескольких способов. Полагаю, я бы спросил профессионалов.

HTML, (некоторые из них так или иначе)

<div id="columns"> 

    <ul id="column1" class="column"> 
     <li class="widget color-red" id="edit1" contenteditable="true"> 
      <div class="widget-head"> 
       <h3>Widget title</h3> 
      </div> 
      <div class="widget-content"> 
      <textarea class="outer" id="persisted-text" rows=5 cols=30></textarea> 

      </div> 
     </li> 
     <li class="widget color-red"> 
      <div class="widget-head"> 
       <h3>Widget title</h3> 
      </div> 
      <div class="widget-content"> 
       <textarea class="outer" rows=5 cols=30></textarea> 
      </div> 
     </li> 
    </ul>

и JS/Jquery:

var supported = 'This text will be saved locally, forever.', 
     unsupported = 'Oh no! Your browser does not support localStorage.'; 
    if (window.localStorage) { 
     var p = document.querySelector('#persisted-text'); 
     if (localStorage.text == null) { 
      localStorage.text = p.value = supported; 
     } else { 
      p.value = localStorage.text; 
     } 
     p.addEventListener('keyup', function(){ localStorage.text = p.value; }, false); 
    } else { 
     document.getElementById('persisted-text').value = unsupported; 
    }

Спусковой крючок ID = "сохранялось-текст" отлично работает с первой текстовой области, но ничего не делает для других. Какую часть этого кода мне нужно изменить/добавить, чтобы начать добавлять несколько локальных локальных ресурсов? Кроме того, jsfiddle, если это помогает: http://jsfiddle.net/6LdfD/6/ Спасибо!

источник

2013-12-01 user1560525

вы уже задал вопрос q uestion в jst последние несколько часов .... удалить его, чтобы снова спросить, и наткнуться на последнее из последних не подходит – charlietfl

Charlietfl, другой вопрос на самом деле не удаляется. Речь шла о том, как реализовать localstorage, поскольку это было для меня и новостью. Он все еще там, и выбран ответ. Теперь, к сожалению, мне все еще нужна помощь с другим аспектом того же проекта. Извините, если возникла путаница, я ценю ответ. – user1560525

Добавить уникальный идентификатор, как имя в текстовое поле и класс в текстовое поле, как

<textarea class="outer persisted-text" name="pt1" id="persisted-text" rows=5 cols=30></textarea>

затем

var supported = 'This text will be saved locally, forever.', 
    unsupported = 'Oh no! Your browser does not support localStorage.'; 
if (window.localStorage) { 
    $('.persisted-text').keyup(function() { 
     localStorage.setItem(this.name, this.value); 
    }).val(function() { 
     return localStorage.getItem(this.name) || supported 
    }) 
} else { 
    $('.persisted-text').val(unsupported); 
}

Демо: Fiddle

Попробуйте

<html><head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>SO - 20309870 - jsFiddle demo by arunpjohny</title> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 




<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){ 
var supported = 'This text will be saved locally, forever.', 
    unsupported = 'Oh no! Your browser does not support localStorage.'; 
if (window.localStorage) { 
    $('.persisted-text').keyup(function() { 
     localStorage.setItem(this.name, this.value); 
    }).val(function() { 
     return localStorage.getItem(this.name) || supported 
    }) 
} else { 
    $('.persisted-text').val(unsupported); 
} 
});//]]> 

</script> 


</head> 
<body> 
    <div id="columns"> 
    <ul id="column1" class="column"> 
     <li class="widget color-red" id="edit1" contenteditable="true"> 
      <div class="widget-head"> 
       <h3>Widget title</h3> 

      </div> 
      <div class="widget-content"> 
       <textarea class="outer persisted-text" name="pt1" id="persisted-text" rows="5" cols="30"></textarea> 
      </div> 
     </li> 
     <li class="widget color-red"> 
      <div class="widget-head"> 
       <h3>Widget title</h3> 

      </div> 
      <div class="widget-content"> 
       <textarea class="outer persisted-text" name="pt2" rows="5" cols="30"></textarea> 
      </div> 
     </li> 
    </ul> 






</div></body></html>

источник

2013-12-01 07:53:16

Thats great! Благодарю. Тем не менее, я отлично работаю в jsfiddle, но я не могу заставить его вести себя таким же образом. Я копирую все это в свой собственный документ, я также пытался копировать источник кадра. Он либо пуст и не сохранит, либо имеет последнюю часть вашей функции JS() { return localStorage.getItem (this.name) || поддерживается }) } в текстовой области – user1560525

@ user1560525 см. обновление –

Добавление localstorage в несколько текстовых полей и вводов

ответ

Смежные вопросы