Javascript.RU

Заполнение списка и запись в cookie

Скрипт является развитием скрипта "Добавление и удаление элементов из списков". Отличием является то, что данные из списка можно записать в cookie браузера, а затем, при запуске скрипта, автоматически вывести их обратно в список.
После ввода элементов в список, нажать кнопку "Просмотр перед записью в cookie". Данные запишутся строкой в текстовое поле. После просмотра и редактирования нажать кнопку "Запись списка в cookie". Данные запишутся в cookie. После запуска скрипта данные автоматически выводятся обратно в список. Их можно редактировать в текстовом поле и повторно записывать в cookie. При этом, старая запись в cookie стирается.

<HTML>
<HEAD>
<TITLE>Добавление элементов в список и запись в cookie</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript" src="/forum/cookies.js"></script>
<script type="text/javascript">
function focusElement() {
var elem = document.forms[0].myInput;
elem.focus();
}

//Библиотека cookies
function SetCookie (name, value, expires, path, domain, secure) {
	document.cookie = name + "=" + escape (value) +
    ((expires == null) ? "" : ("; expires=" +
    expires.toGMTString())) +
    ((path == null) ? "" : ("; path=" + path)) +
    ((domain == null) ? "" : ("; domain=" + domain)) +
    ((secure == true) ? "; secure" : "");
}

// Вспомогательная функция, используемая функцией getCookie()
function getCookieVal (offset) {
    var endstr = document.cookie.indexOf (";", offset);
    if (endstr == -1)
      endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}

//Основная функция для определения значения cookie по имени
function GetCookie (name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
      var j = i + alen;
      if (document.cookie.substring(i, j) == arg)
      return getCookieVal (j);
      i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0)
      break;
}
    return null;
}

function DelCuk() {
    var largeExpDate = new Date ();
    largeExpDate.setTime(largeExpDate.getTime());
    SetCookie('Cuk',Cuk,largeExpDate,myDomain);
    document.write('<p align=center>' + "cookie удален" + '</p>');
}
//Запись в cookie
function AddCk() {
var Cuk=document.forms[0].myInput.value;
    pathname = location.pathname;
    myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
    // Установка параметра expire на год вперед.
    var largeExpDate = new Date ();
    largeExpDate.setTime(largeExpDate.getTime() + (365 * 24 * 3600 * 1000));
    SetCookie('Cuk',Cuk,largeExpDate,myDomain);
    document.forms[0].myInput.value=""
    document.write('<p align=center>' + "Запись успешно произведена" + '</p>');
}
//Заполнение списка
function addList(){
    valid = true;
    document.forms[0].myInput.focus()
    var list1 = document.getElementsByTagName('select')['list1']; 
    var li = document.createElement('option'); 
    /*Запрещение ввода пустой строки */
    if (document.forms[0].myInput.value<1)
    return valid;
    /* Ввод в список из текстового поля */
    li.innerHTML =document.forms[0].myInput.value
    list1.appendChild(li); 
    /* Очистка текстового поля */
    document.form1.myInput.value=""
}  

//Ввод массива в список
function addArr(){for (var i=0; i < arr.length; 
    i++){var li=document.createElement('option');
    list1.appendChild(li);
    li.innerHTML =arr[i]
}}

function addText(){var li = document.getElementsByTagName('option'); 
    //Ввод всего списка с разделением элементов пробелами
    for (var i=0; i < li.length; i++){
    document.forms[0].myInput.value=document.forms[0].myInput.value+(li[i].value)+' '
    }
    //Удаление пробела в конце списка
    document.forms[0].myInput.value = document.forms[0].myInput.value.slice(0,-1); 
}
var Cuk = GetCookie('Cuk');
if (Cuk == null) {
Cuk = alert('cookie отсутствует');
} else {
pathname = location.pathname;
myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
// Установка параметра expire на год вперед.
var largeExpDate = new Date ();
largeExpDate.setTime(largeExpDate.getTime() + (365 * 24 * 3600 * 1000));
var arr = Cuk.split(' ')  // массив из Cuk; разделитель - пробел
}
</script>
</HEAD>
<BODY  onload='addArr()'>  
<form name="form1">
<br /><b>Ввод элементов технической системы</b><br />
<p><textarea name="myInput" value= "" cols="32" rows="5"></textarea></p>
<input type='button' value='Добавить элемент ТС в список'
onclick='addList()'  style="margin-left: 25px";><br />
<input type=button value='Удалить элемент ТС из списка' 
onClick="for(var i=0;i<form1.list1.length;i++)
if(form1.list1.options[i].selected==true) 
form1.list1.options[i]= null" style="margin-left: 25px";><br /> 
<input type='button' value='Просмотр перед записью в cookie' onclick='addText()'  style="margin-left: 25px";><br />
<b>Элементы ТС</b><br /><br />
<select size="5" multiple id="list1"></select><br />
&nbsp;&nbsp;<INPUT TYPE="button" VALUE="Запись в cookie" OnClick='AddCk()'><br />
<INPUT TYPE="button" VALUE="Удаление cookie" OnClick='DelCuk()'>
</form>
</BODY>
</HTML>

В следующем скрипте элементы напрямую записываются в cookie из списка.
После ввода элементов в список, нажать кнопку "Запись списка в cookie". Данные запишутся в cookie.

<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
#list{width: 70px;} /* Ширина списка в пикселах */
-->
</style>
<script type="text/javascript">
function focusElement() {
var elem = document.forms[n].myInput;
elem.focus();
}

function SetCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
                ((expires) ? "; expires=" + expires.toGMTString() : "") +
                ((path) ? "; path=" + path : "") +
                ((domain) ? "; domain=" + domain : "") +
                ((secure) ? "; secure" : "")
}
// Вспомогательная функция, используемая функцией getCookie()
function getCookieVal (offset) {
    var endstr = document.cookie.indexOf (";", offset);
    if (endstr == -1)
      endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}
//Основная функция для определения значения cookie по имени
function GetCookie (name, value) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
      var j = i + alen;
      if (document.cookie.substring(i, j) == arg)
      return getCookieVal (j);
      i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0)
      break;
}
    return null;
}

function DelCuk(name) {
    var largeExpDate = new Date ();
    largeExpDate.setTime(largeExpDate.getTime());
    if (name == Cuk){SetCookie('Cuk',Cuk,largeExpDate,myDomain)}
    else{SetCookie('Cuk2',Cuk2,largeExpDate,myDomain)}
    alert("cookie удалена");
}
//Запись в cuk
function AddCk(n,name) {
var li = document.forms[n].getElementsByTagName('option'); 
    //Ввод всего списка с разделением элементов пробелами
    var s = ""
    for (var i=0; i < li.length; i++){s = s + (li[i].value)+' '}
    //Удаление пробела в конце списка
    s = s.slice(0,-1); 
    if (name==Cuk){SetCookie('Cuk',s,largeExpDate,myDomain)}else
    {SetCookie('Cuk2',s,largeExpDate,myDomain)}
    alert("Запись произведена");
}
//Заполнение списка
function addList(n){
valid = true;
document.forms[n].myInput.focus()
var list = document.forms[n].getElementsByTagName('select')['list']; 
var option = document.createElement('option'); 
/*Запрещение ввода пустой строки */
if (document.forms[n].myInput.value<1)
return valid;
/* Ввод в список из текстового поля */
option.innerHTML =document.forms[n].myInput.value
/* Очистка текстового поля */
document.forms[n].myInput.value=""
document.forms[n].list.appendChild(option); 
}
function addArr(){for (var i=0; i < arr.length; 
    i++){var li=document.createElement('option');
    document.forms[0].list.appendChild(li);
    li.innerHTML =arr[i]
    }
}
var Cuk = GetCookie('Cuk')
pathname = location.pathname;
myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
// Установка параметра expire на год вперед.
var largeExpDate = new Date ();
largeExpDate.setTime(largeExpDate.getTime() + (365 * 24 * 3600 * 1000));
var arr = Cuk.split(' ')  // массив из Cuk; разделитель - пробел
</script>
</HEAD>
<BODY onload="addArr()">
<table  name = "tb" width="" cellspacing="0" cellpadding="0"><tbody> 
<tr>
    <td width="" bgcolor="#ffffcc" id="first">
        <center><form name="fm1">
        <p><textarea name="myInput" value= "" cols="32" rows="1"></textarea></p>
        <input type='button' value='Добавить элемент в список'
        onclick='addList(0)'  style="margin-left: 20px; width: 235px";><br />
        <input type=button value='Удалить элемент из списка' 
        onClick="for(var i=0;i<fm1.list.length;i++)
        if(fm1.list.options[i].selected==true) 
        fm1.list.options[i]= null" style="margin-left: 20px; width: 235px"><br /><br /> 
        <b>Список элементов</b><br /><br />
        <select size="15" id="list"></select><br />
        <INPUT TYPE="button" VALUE="Запись списка в cookie" OnClick='AddCk(0,Cuk)'><br />
        <INPUT TYPE="button" VALUE="Удаление cookie" OnClick='DelCuk(Cuk)'>
        </form></center>
    </td>
</tr>
</tbody></table>
</BODY>
</HTML>
0

Автор: ixth, дата: 6 декабря, 2010 - 02:01
#permalink

invem, вы ошибочно пытаетесь перенести некоторые приемы кодинга из VB в js и усложняете некоторые задачи, у которых есть простое типовое решение.

Например, ф-ция setCookie. Забудьте про argv и argc. Вы можете указать все нужные параметры функции и в случае, если эти параметры не будут переданы, они примут значение undefined, которое при приведении к boolean даст false.
А чтобы не мучиться с конкатенацией строк, просто создаем массив, а затем склеиваем его в строку разделителем ';'.

function setCookie (name, value, expires, path, domain, secure) {
	var cookie = [];
	cookie.push(name + "=" + escape(value));
	if (expires) {
		cookie.push("expires=" + expires.toGMTString()));
	}
	if (path) {
		cookie.push("path=" + path);
	}
	if (domain) {
		cookie.push("domain=" + domain);
	}
	if (secure === true) {
		cookie.push("secure");
	}
	document.cookie = cookie.join(';');
}

Автор: invem, дата: 6 декабря, 2010 - 21:25
#permalink

ixth, спасибо за замечания. Библиотеку куков я взял готовую, особенно не вникая в ее содержание. Скрипт, конечно, надо переделать.


Автор: javs, дата: 9 декабря, 2010 - 21:28
#permalink

Вообще-то все изобрели до нас


Автор: I-zone, дата: 11 декабря, 2010 - 20:59
#permalink

Ввод элементов технической системы.
А что за техническая система упоминается в каждой вашей функции? К чему это?
Можно узнать, для чего написан код (в чём его польза)?


Автор: invem, дата: 13 декабря, 2010 - 21:58
#permalink

Техническая система (ТС) — совокупность материальных элементов (компонентов), предназначенная для удовлетворения какой-либо потребности человека.
Код написан для построения компонентной модели ТС. Компоненты — составные части ТС (для изделий — это сборочные единицы, детали и т.д.; для технологических процессов — технологические операции, переходы, оборудование, оснастка и др.). Компонентная модель (КМ) - это модель, отражающая состав объекта и иерархию (соподчиненность) его элементов.
Построение КМ - это этап функционально-стоимостного анализа (ФСА) объектов техники, как метода поиска и реализации наиболее целесообразных технико-экономических решений.
В целом мне хотелось бы создать набор скриптов для проведения ФСА.
Подробней о ФСА можно узнать в http://www.triz-summit.ru/ru/section.php?docId=3981.


Автор: I-zone, дата: 16 декабря, 2010 - 13:21
#permalink

Это наверное был риторический вопрос. Просто пока вашей ТС и не пахнет и вы можете вводить в заблуждение пользователей. Это всего лишь элементы интерфейса, не более того и используются (можете поверить наслово) не только для построения компонентной модели. Вот если бы выложили скрипт алгоритма работы самой программы, а не элементов ввода, тогда возможно идея и код были полезны в рамках этого сайта. Этот сайт, как вы можете заметить вверху главной страницы, предоставляет: "как можно более грамотную и структурированную информацию по языку javascript и смежным технологиям".


Автор: I-zone, дата: 16 декабря, 2010 - 17:13
#permalink

1) Если cookie пусты, то функция GetCookie возвращает null и последующее Cuk.split(':') - выкидывает исключение.

2) В функции addArr - невозможно получить list1, так как он объявляется в другой функции и даже если бы он объявлялся глобально, всё равно бы произошла бы ошибка, потому что addArr вызывается раньше addList.

И тому подобное. А ведь это основы. А так-же во всех браузерах уже давно есть баг панели. Пользуйтесь, не стесняйтесь


Автор: invem, дата: 16 декабря, 2010 - 17:35
#permalink

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


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 00:05
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:36
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
13 + 4 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
invem
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum