TASK: Create a page that displays all available cookies in a table (name, value). For each cookie in the table, you need to add a "delete" button. When you click on "delete", a confirmation with the text "Delete cookie with the name ...?" Should be displayed on the screen. Instead ... you must substitute the name of the cookie to be deleted. If the user responded positively, then the corresponding cookie should be deleted.

Closed due to the fact that the essence of the question is not clear to the participants of Viktor Tomilov , AK ♦ , HamSter , Alex , 0xdb on Mar 2 '18 at 23:35 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • and how to implement "add cookies" functionality? - deebov
  • To the answers to the question I will add that not all cookies are available from Javascript. HttpOnly cookies cannot be read. prophet.ru/2010/12/httponly-cookies - user3127286

2 answers 2

Here is what you wanted:

(function (Cookies) { if (!Cookies) { alert('Библиотека "Cookies", необходимая для работы, не найдена.'); return; } var _wrapper = document.getElementById('cookie-wrapper'); if (!_wrapper) { alert('Контейнер для вывода таблицы с Cookie не был найден.'); return; } function generateRow (cells) { var _row = document.createElement('tr'); cells.forEach(function (cellData) { var _cell = document.createElement('td'); if (cellData.className) { _cell.className = cellData.className; } if (cellData.content) { if (cellData.content instanceof HTMLElement) { _cell.appendChild(cellData.content); } else { _cell.innerHTML = cellData.content; } } _row.appendChild(_cell); }); return _row; } function generateAddCookieRow () { var _nameField = document.createElement('input'); _nameField.setAttribute('type', 'text'); _nameField.setAttribute('placeholder', 'Введите название cookie...'); var _valueField = document.createElement('input'); _valueField.setAttribute('type', 'text'); _valueField.setAttribute('placeholder', 'Введите значение cookie...'); var _addBtn = document.createElement('button'); _addBtn.innerHTML = 'Добавить'; _addBtn.addEventListener('click', function () { var nameValue = _nameField.value; var valueValue = _valueField.value; if (!nameValue.length) { alert('Вы не заполнили поле "Название".'); return; } if (!valueValue.length) { alert('Вы не заполнили поле "Значение".'); return; } Cookies.set(nameValue, valueValue); recalculateTable(); }); return generateRow([ { content: _nameField, className: 'cookies__cell' }, { content: _valueField, className: 'cookies__cell' }, { content: _addBtn, className: 'cookies__cell' } ]); } function removeCookie (e) { var cookieName = e.currentTarget.getAttribute('data-name'); var result = confirm('Вы действительно хотите удалить cookie "' + cookieName + '"?'); if (result) { Cookies.remove(cookieName); recalculateTable(); } } function generateTable () { var _table = document.createElement('table'); _table.className = 'cookies'; _table.appendChild( generateRow([ { content: 'Название', className: 'cookies__cell cookies__cell-head' }, { content: 'Значение', className: 'cookies__cell cookies__cell-head' }, { className: 'cookies__cell' } ]) ); var cookieList = Cookies.get(); for (var cookieName in cookieList) { if (cookieList.hasOwnProperty(cookieName)) { var cookieValue = cookieList[cookieName]; var _removeBtn = document.createElement('button'); _removeBtn.setAttribute('data-name', cookieName); _removeBtn.innerHTML = 'Удалить'; _removeBtn.addEventListener('click', removeCookie); _table.appendChild( generateRow([ { content: cookieName, className: 'cookies__cell' }, { content: cookieValue, className: 'cookies__cell' }, { content: _removeBtn, className: 'cookies__cell' } ]) ); } } _table.appendChild( generateAddCookieRow() ); return _table; } function recalculateTable() { _wrapper.innerHTML = ''; _wrapper.appendChild(generateTable()); } recalculateTable(); })(window.Cookies); 
 .cookies { width: 100%; border: 1px solid #222; border-collapse: collapse; } .cookies__cell { padding: 3px 5px; border: 1px solid #222; } .cookies__cell-head { font-weight: bold; } 
 <script src="//cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> <div id="cookie-wrapper"></div>

For security reasons, Stackoverflow will not let you run the code right from here because of working with a cookie, so you can test the code here: https://jsfiddle.net/danilvalov/de7rrfLk/

The only thing, instead of working directly with document.cookie, used the Cookies library. But writing your own get / set / delete methods will not be a problem.

     document.cookie

    Split by ";"

    Get a cookie (Название=Значение)