Zrobiłem do testów plik HTML, w którym testuję ciastka i magazyn lokalny.
Plik testuję z dysku lokalnego. Magazyn działa poprawnie, ale w przypadku ciastek, jak się naciśnie F5, to dane sa utrzymane, ale jak się zamknie i otworzy przeglądarke, to ciastka giną, a zostaje sam magazyn.
Zrobiłem do testów plik HTML, w którym testuję ciastka i magazyn lokalny.
Plik testuję z dysku lokalnego. Magazyn działa poprawnie, ale w przypadku ciastek, jak się naciśnie F5, to dane są utrzymane, ale jak się zamknie i otworzy przeglądarkę, to ciastka giną, a zostaje sam magazyn. Przy uruchamianiu wyświetla alert z informacją, co zostało zachowane. Myślę, że obsługa testu jest intuicyjna. Przyciski ustawiające i usuwające działają na obu obszarach jednocześnie
Dlaczego ciastka nie są zachowywane pomimo późniejszej daty wygaśnięcia?
<!doctype html>
<html>
<head>
</head>
<body>
<script>
function CookieExists(name)
{
if (document.cookie !== "")
{
const cookies = document.cookie.split(/; */);
for (let i=0; i<cookies.length; i++)
{
const cookieName = cookies[i].split("=")[0];
const cookieVal = cookies[i].split("=")[1];
if (cookieName === decodeURIComponent(name))
{
return true;
}
}
}
return false;
}
function CookieGet(name)
{
if (document.cookie !== "")
{
const cookies = document.cookie.split(/; */);
for (let i=0; i<cookies.length; i++)
{
const cookieName = cookies[i].split("=")[0];
const cookieVal = cookies[i].split("=")[1];
if (cookieName === decodeURIComponent(name))
{
return decodeURIComponent(cookieVal);
}
}
}
}
function CookieSet(name, val)
{
const cookieName = encodeURIComponent(name);
const cookieVal = encodeURIComponent(val);
let cookieText = cookieName + "=" + cookieVal;
if (typeof days === "number")
{
const data = new Date(2030, 1, 1, 0, 0, 0, 0);
cookieText += "; expires=" + data.toGMTString();
}
//cookieText += "; path=/";
//cookieText += "; secure";
document.cookie = cookieText;
}
function CookieDelete(name)
{
const cookieName = encodeURIComponent(name);
document.cookie = cookieName + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
function CookieRaw()
{
return document.cookie;
}
function StorageExists(name)
{
if (localStorage[name])
{
return true;
}
else
{
return false;
}
}
function StorageGet(name)
{
return(localStorage.getItem(name));
}
function StorageSet(name, val)
{
localStorage.setItem(name, val);
}
function StorageDelete(name)
{
localStorage.removeItem(name)
}
function StorageRaw()
{
var zawartosc = "";
for(var klucz in localStorage)
{
zawartosc += ( klucz + "=" + localStorage.getItem( klucz ) + "\n" );
}
return zawartosc;
}
var StartInfo = "";
if (CookieExists("Test"))
{
StartInfo += "Ciastko Test: " + CookieGet("Test") + "\n";
}
else
{
StartInfo += "Brak ciastka Test\n";
}
if (CookieExists("Nazwa"))
{
StartInfo += "Ciastko Nazwa: " + CookieGet("Nazwa") + "\n";
}
else
{
StartInfo += "Brak ciastka Nazwa\n";
}
if (StorageExists("Test"))
{
StartInfo += "Magazyn Test: " + StorageGet("Test") + "\n";
}
else
{
StartInfo += "Brak magazynu Test\n";
}
if (StorageExists("Nazwa"))
{
StartInfo += "Magazyn Nazwa: " + StorageGet("Nazwa") + "\n";
}
else
{
StartInfo += "Brak magazynu Nazwa\n";
}
alert(StartInfo);
</script>
<button onclick="CookieSet('Test', 'ABC'); StorageSet('Test', 'ABC');">Ustaw Test=ABC</button>
<button onclick="CookieSet('Test', '123'); StorageSet('Test', '123');">Ustaw Test=123</button>
<button onclick="CookieDelete('Test'); StorageDelete('Test');">Usuń Test</button>
<br>
<button onclick="CookieSet('Nazwa', 'ABC'); StorageSet('Nazwa', 'ABC');">Ustaw Nazwa=ABC</button>
<button onclick="CookieSet('Nazwa', '123'); StorageSet('Nazwa', '123');">Ustaw Nazwa=123</button>
<button onclick="CookieDelete('Nazwa'); StorageDelete('Nazwa');">Usuń Nazwa</button>
<br>
<button onclick="alert(CookieRaw());">Dane surowe ciastek</button>
<button onclick="alert(StorageRaw());">Dane surowe magazynu</button>
<br>
<a href="http://kursjs.pl/kurs/cookies/cookie.php">http://kursjs.pl/kurs/cookies/cookie.php</a>
<br>
<a href="https://magazynt3.pl/czym-jest-localstorage-i-jak-je-wykorzystac-z-html5/">https://magazynt3.pl/czym-jest-localstorage-i-jak-je-wykorzystac-z-html5/</a>
<br>
<a href="https://stackoverflow.com/questions/3262605/how-to-check-whether-a-storage-item-is-set">https://stackoverflow.com/questions/3262605/how-to-check-whether-a-storage-item-is-set</a>
</body>
</html>
Był jeden błąd w CookieSet, poprawiłem go, ale problem pozostaje aktualny.
<!doctype html>
<html>
<head>
</head>
<body>
<script>
function CookieExists(name)
{
if (document.cookie !== "")
{
const cookies = document.cookie.split(/; */);
for (let i=0; i<cookies.length; i++)
{
const cookieName = cookies[i].split("=")[0];
const cookieVal = cookies[i].split("=")[1];
if (cookieName === decodeURIComponent(name))
{
return true;
}
}
}
return false;
}
function CookieGet(name)
{
if (document.cookie !== "")
{
const cookies = document.cookie.split(/; */);
for (let i=0; i<cookies.length; i++)
{
const cookieName = cookies[i].split("=")[0];
const cookieVal = cookies[i].split("=")[1];
if (cookieName === decodeURIComponent(name))
{
return decodeURIComponent(cookieVal);
}
}
}
}
function CookieSet(name, val)
{
const cookieName = encodeURIComponent(name);
const cookieVal = encodeURIComponent(val);
let cookieText = cookieName + "=" + cookieVal;
const data = new Date(2030, 1, 1, 0, 0, 0, 0);
cookieText += "; expires=" + data.toGMTString();
document.cookie = cookieText;
}
function CookieDelete(name)
{
const cookieName = encodeURIComponent(name);
document.cookie = cookieName + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
function CookieRaw()
{
return document.cookie;
}
function StorageExists(name)
{
if (localStorage[name])
{
return true;
}
else
{
return false;
}
}
function StorageGet(name)
{
return(localStorage.getItem(name));
}
function StorageSet(name, val)
{
localStorage.setItem(name, val);
}
function StorageDelete(name)
{
localStorage.removeItem(name)
}
function StorageRaw()
{
var zawartosc = "";
for(var klucz in localStorage)
{
zawartosc += ( klucz + "=" + localStorage.getItem( klucz ) + "\n" );
}
return zawartosc;
}
var StartInfo = "";
if (CookieExists("Test"))
{
StartInfo += "Ciastko Test: " + CookieGet("Test") + "\n";
}
else
{
StartInfo += "Brak ciastka Test\n";
}
if (CookieExists("Nazwa"))
{
StartInfo += "Ciastko Nazwa: " + CookieGet("Nazwa") + "\n";
}
else
{
StartInfo += "Brak ciastka Nazwa\n";
}
if (StorageExists("Test"))
{
StartInfo += "Magazyn Test: " + StorageGet("Test") + "\n";
}
else
{
StartInfo += "Brak magazynu Test\n";
}
if (StorageExists("Nazwa"))
{
StartInfo += "Magazyn Nazwa: " + StorageGet("Nazwa") + "\n";
}
else
{
StartInfo += "Brak magazynu Nazwa\n";
}
alert(StartInfo);
</script>
<button onclick="CookieSet('Test', 'ABC'); StorageSet('Test', 'ABC');">Ustaw Test=ABC</button>
<button onclick="CookieSet('Test', '123'); StorageSet('Test', '123');">Ustaw Test=123</button>
<button onclick="CookieDelete('Test'); StorageDelete('Test');">Usuń Test</button>
<br>
<button onclick="CookieSet('Nazwa', 'ABC'); StorageSet('Nazwa', 'ABC');">Ustaw Nazwa=ABC</button>
<button onclick="CookieSet('Nazwa', '123'); StorageSet('Nazwa', '123');">Ustaw Nazwa=123</button>
<button onclick="CookieDelete('Nazwa'); StorageDelete('Nazwa');">Usuń Nazwa</button>
<br>
<button onclick="alert(CookieRaw());">Dane surowe ciastek</button>
<button onclick="alert(StorageRaw());">Dane surowe magazynu</button>
<br>
<a href="http://kursjs.pl/kurs/cookies/cookie.php">http://kursjs.pl/kurs/cookies/cookie.php</a>
<br>
<a href="https://magazynt3.pl/czym-jest-localstorage-i-jak-je-wykorzystac-z-html5/">https://magazynt3.pl/czym-jest-localstorage-i-jak-je-wykorzystac-z-html5/</a>
<br>
<a href="https://stackoverflow.com/questions/3262605/how-to-check-whether-a-storage-item-is-set">https://stackoverflow.com/questions/3262605/how-to-check-whether-a-storage-item-is-set</a>
</body>
</html>
A nie masz aby w konfiguracji przeglądarki ustawionego przechowywania ciastek tylko do zamknięcia programu?
Sprawdziłem w ustawieniach i mam akceptowanie ciastek i przechowywanie ich do czasu wygaśnięcia. Inne strony używające ciastek działają poprawnie, czyli dane nie giną.
Jeśli plik HTML z testerem ciastek odpalasz po prostu z jakiegoś katalogu na dysku, to wrzuć na serwer lokalny i tam przetestuj. Ciastka uruchamiane bez kontekstu przypisanej im domeny mogą zachowywać się dziwnie. Np. Chrome nie chce ich wtedy w ogóle zapisywać.
Jeśli to nie to, to spróbuj zmienić funkcję (na bardziej z resztą uniwersalną), tylko ustaw sobie exdays jako trzeci parametr wywołania:
function CookieSet(name, val) {
exdays = 100;
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = name + "=" + val + ";" + expires + ";path=/";
}
Plik odpalam z katalogu na dysku, z serwerem jeszcze nie testowałem.
Sprawdziłem na innym komputerze w programie Microsoft Edge w Windows 10 i Edge 41.16299.402.0 z EdgeHTML 16.16299 zachowuje ciastka nawet po zamknięciu. Co ciekawe, ten program nie rozumie localStorage (zupełnie tak, jakby nie obsługiwał local Storage, a na W3C i CanIUse jest info, że obsługuje) i do testu cookies musiałem wykomentować wszystkie odniesienia do LS. Sprawdziłem w Internet Explorer 11 i też zachowuje ciastka po zamknięciu, ale nie obsługuje Local Storage.
Co więcej, każda z testowanych przeglądarek (IE, Edge, Firefox, Chrome), na błędy i braki w JS reaguje "po cichu" i muszę uruchamiać narzędzia programistycze, badawcze (różnie się nazywa, ale wiadomo, o co chodzi) i tam w konsoli się pokaże info. Pamiętam, jak co najmniej 10 lat temu, w Internet Explorer, jak był błąd w JavaScript, to wywalał komunikat z informacją i pytaniem, czy chcę uruchamiać skrypty na tej stronie.
Umieściłem na serwerze HTTP i sprawdziłem Edge, Firefox i Internet Explorer. W tym przypadku, we wszystkich trzech przeglądarkach cookies i LS działa poprawnie, przechowuje dane po zamknięciu.
Bilski napisał(a):
Pamiętam, jak co najmniej 10 lat temu, w Internet Explorer, jak był błąd w JavaScript, to wywalał komunikat z informacją i pytaniem, czy chcę uruchamiać skrypty na tej stronie.
Uwierz - nie chciałbyś tego w takiej postaci ;)
Jeśli używasz wtyczki Web Developer
https://chrispederick.com/work/web-developer/history/firefox/
to przynajmniej do wersji 1.2.5 i przynajmniej pod FF do wersji 52 istnieje możliwość ustawienia sobie gdzieś na pasku przeglądarki indykatorów poprawności CSS, JS oraz informacji o trybie Strickt/Quirks:
A jeśli ponadto zainstalujesz Html Validator, to możesz mieć też kontrolkę z powiadomieniem o błędach HTML.