Sorumun cevabını Next.js dokümantasyonunda buldum.
Custom Server
Varsayılan olarak next.js, next start
ile kendi sunucusunu başlatır.
Eğer sizin kendi backend'iniz varsa bunu Next.js ile kullanmaya devam edebilirsiniz.
Özel bir Next.js sunucusu, özel sunucu kalıplarını kullanabileceğiniz bir server başlatmanıza olanak verir.
Çoğunlukla buna ihtiyacınız omaz ama bu tam bir özelleştirme yapmanıza olanak verir.
Lütfen yalnızca Next.js'in routing yapısı sizin ihtiyaçlarınızı karşılayamıyorsa bir custom server kullanmanız gerektiğini unutmayın.
Bir custom server önemli performans optimizasyonlarını kaldıracaktır. Mesela serverless fonksiyonlar ve Automatic Static Optimization.
Aşağıdaki custom server örneğine bir göz atın:
// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// middleware kullanırken `hostname` ve `port` aşapıdaki şekilde sağlanmalıdır.
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer(async (req, res) => {
try {
// `url.parse` için ikinci parametre olarak true vermeyi unutmayın.
// Bu, URL'nin query bölümünü ayrıştırmasını söyler.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/a') await app.render(req, res, '/a', query)
else if (pathname === '/b') await app.render(req, res, '/b', query)
else await handle(req, res, parsedUrl)
}
catch (err) {
console.error('İşlem sırasında hata oluştu', req.url, err)
res.statusCode = 500
res.end('internal server error')
}
}).listen(port, (err) => {
if (err) throw err
console.log(`> Sunucu Hazır: http://${hostname}:${port}`)
})
})
server.js, babel veya webpack'ten geçmez.
Bu dosyanın gerektirdiği syntax ve import'ların, çalıştırdığınız geçerli node sürümüyle uyumlu olduğundan emin olun.
Custom server'ı çalıştırmak için package.json içindeki script komutlarını şu şekilde güncellemeniz gerekir:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
Custom server, sunucuyu Next.js uygulamasına bağlamak için aşağıdaki içe aktarmayı kullanır:
const next = require('next')
const app = next({})
İlk satırdaki next
, aşağıdaki parametreleri alabilen bir objeyi parametre olarak alan bir fonksiyon döndürür:
- dev: [Boolean] - Next.js'in geliştirici modunda başlayıp başlamayacağı. Varsayılan:
false
- dir: [String] - Next.js projesinin konumu. Varsayılan: "."
- quiet: [Boolean] - Sunucu bilgilerini içeren hata mesajlarını gizlemek istiyor musun? Varsayılan:
false
- conf: [object] - next.config.js dosyası için kullanacağınız object'in aynısı. Varsayılan:
{}
İkinci satırdakinext
fonksiyonunun sonucu atanmış olanapp
, Next.js'in istekleri gerektiği gibi kullanmasını sağlamak için kullanılabilir.
Dosya Sistemine Göre Yapılan Routing'i Kaldırmak
Varsayılan olaran Next.js, pages klasörü altına yerleştirilen dosya-klasör yapısına göre bir routing kullanır.
Eğer Custom Server kullanarak aynı sayfayı iki farklı link'in render etmesi sağlanıyorsa bu durum SEO ve UX açısından sorunlara yol açabilir.
Bu davranışı devre dışı bırakmak ve sayfalardaki dosyalara dayalı yönlendirmeyi önlemek için next.config.js dosyasını açın ve useFileSystemPublicRoutes
yapılandırmasını devre dışı bırakın:
module.exports = {
useFileSystemPublicRoutes: false,
}
useFileSystemPublicRoutes
öğesinin SSR'den dosya adı yollarını devre dışı bıraktığını unutmayın.
İstemci tarafı yönlendirme hala bu yollara erişebilir.
Bu seçeneği kullanırken, programatik olarak istemediğiniz rotalara navigasyona karşı önlem almalısınız.
İstemci tarafı yönlendiricisini, dosya adı yollarına istemci tarafı yönlendirmelerine izin vermeyecek şekilde de yapılandırmak isteyebilirsiniz. Bunun için router.beforePopState
'e bakın.
https://jquery.com/upgrade-guide/3.0/
Bu saufada tam olarak geçiş için neler yapılması gerektiğini anlatıyor.
Ayrıca bu kaynakta JQuery Migrate Plugin başlığı altında şöyle yazıyor:
jQuery 1.9/2.0'da yapılan büyük değişikliklerde olduğu gibi, eski kodun 3.0 sürümüne geçişini basitleştirmek için jQuery Migrate Plugin'in yeni bir sürümünü oluşturduk. Bu eklentiyi bir yükseltme aracı olarak kullanmanızı şiddetle tavsiye ederiz, kodunuzu etkileyebilecek büyük değişikliklerin çoğu hakkında özel tavsiyeler verecektir.
Sonra da aynı başlık altında adım adım ne yapmanız gerektiği anlatılmış.
1. Önce sayfada kullandığınız jquery sürümünü 1.x veya 2.x'in en son sürümüne yükseltin. Yani mesela 1.12.0 sürümünü kullanıyorsanız artık 1.12.4 sürümünü kullanın.
2. Sıkıştırılmamış jQuery Migrate 1.x Eklentisini sayfaya ekleyin.
3. Mecbur değil ama önerilir: sonraki sürümler genellikle jQuery'nin en son sürümleriyle en uyumlu olduğundan, kullanımda olan tüm eklentileri güncelleyin.
4. Bir kılavuz olarak JQMIGRATE 1.x uyarı dokümantasyonunu kullanarak sayfayı test edin ve konsolda görünen tüm uyarıları çözün.
5. JQuery Migrate 1.x eklentisini kaldırın ve sayfadaki güncellenmiş jQuery kodunun yalnızca en son jQuery 1.x/2.x kullanımdayken düzgün şekilde çalışmaya devam etmesini sağlayın. Yani sayfanız migrate olmadan JQuery 1.12.4 ile düzgün şekilde çalışabiliyor durumda olsun.
-- Eğer sizin sayfanızda zaten JQuery 1.12.4 yüklüyse ve hiç hata almıyorsanız direkt 6.adımdan da başlayabilirsiniz.
6. Sayfadaki jQuery sürümünü en son 3.x sürümüne (3.6.1) yükseltin ve sıkıştırılmamış jQuery Migrate 3.x eklentisini sayfaya ekleyin.
7. JQMIGRATE 3.x uyarı dokümantasyonunu kılavuz olarak kullanarak sayfayı test edin ve konsolda görünen tüm uyarıları çözün. Üçüncü taraf eklentilerdeki hataları eklenti yazarına bildirin çünkü bu eklenti yeni jquery sürümüyle uyumlu çalışamıyor olabilir.
8. jQuery Migrate 3.x eklentisini kaldırın ve sayfanın düzgün şekilde çalışmaya devam etmesini sağlayın.
Sadece hızlıca bir göz atmanız da yetebilir belki.
Ben çok kullanılan bazı fonksiyonlardaki değişimleri yazdım:
1. Kodunuzda $(window).load()
kullanımı varsa bunu $(window).on('load')
şeklinde değiştirmelisiniz.
$(window).load(function() {
// ...kodlar
}
yerine şu olmalı:
$(window).on('load', function() {
// ...kodlar
}
).load(function
geçen ifadeleri ).on('load', function
şeklinde bul-değiştir mantığıyla değiştirebilirsiniz.
2. Kullanılan tarayıcıyı algılamak için artık $.browser
kullanamazsınız. Kullanılan tarayıcıyı tespit etmenin başka yollarını kullanmalısınız.
if ($.browser == 'MSIE') {
// Ben internet explorer'ım diyen kodlar...
}
// yerine şöyle bir kod kullanılabilir:
const regex = RegExp('MSIE*');
if (regex.test(navigator.userAgent)) {
// Ben internet explorer'ım diyen kodlar...
}
3. addSelf()
yerine addBack()
kullanın. Basitçe bul-değiştir mantığıyla halledebilirsiniz.
1,2,3 için Kaynak: https://www.computerminds.co.uk/articles/upgrading-jquery-1x-version-3x
4. size()
yerine length
kullanın. Kaç eleman seçtiğinizi length
ile öğrenebilirsiniz.
5. $.unique()
fonksiyonunun adı değişti: $.uniqueSort()
. İşlevi aynı, sadece fonksiyon adı değişti.
6. $.ready
ifadesi destekleniyor. $.when
ile veya Promise
yapılarıyla kullanılabilir. Örn:
$.when( $.ready, $.getScript("optional.js") ).then(function() {
// document hazır olduğunda optional.js yüklenip çalıştırlacak...
}).catch( function() {
// işlem sırasında bir hata oluşmuşsa burası çalışacak...
});
7. .width()
, .height()
, .css("width")
, and .css("height")
eskiden hep tam sayı olarak dönerdi. Artık daha hassas veri döndüğü için tam sayı yerine küsüratlı sayı da dönebilir.
8. .on("ready", fonksiyon)
kaldırıldı. Bunun yerine $(fonksiyon)
kullanın.
9. .bind()
ve .delegate()
kaldırıldı. Bunlar yerine .on()
var. Aynı şekilde .unbind()
ve .undelegate()
yerine de .off()
kullanılmalı.
4-9 Kaynak: https://jquery.com/upgrade-guide/3.0/
const newStatus = !$(this).prop('checked');
$(this).prop('checked', newStatus);
şeklinde prop()
fonksiyonunu kullanmayı deneyebilirsiniz.
O zaman ekran genişliğini kontrol edip öyle çalıştırın.
<script id="willRemove">
(function () {
var options = {
call: "0 000 000 00 00", // Call phone number
whatsapp: "0 000 000 00 00", // WhatsApp number
call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
button_color: "#FF6550", // Color of button
position: "left", // Position may be 'right' or 'left'
order: "call,whatsapp", // Order of buttons
};
var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
// Ekran genişliği 600px veya altındaysa silinsin...
if(window.innerWidth <= 600) {
setTimeout(function(){
// Bu #willRemove id'li script tag'ı kendini 10 milisaniye sonra imha edecek...
document.getElementById('willRemove').remove();
},10);
}
</script>
Kodun çalıştıktan sonra kendini remove etmesini sağlayabilirsiniz.
Bunun için bu kodları bir script tag'ına alın ve bu tag'a bir id verin.
Sonra setTimeout()
fonksiyonuyla kodun çalışmasına yetecek kadar kısa bir an izin verin ve bu tag'ı komple silin.
<script id="willRemove">
(function () {
var options = {
call: "0 000 000 00 00", // Call phone number
whatsapp: "0 000 000 00 00", // WhatsApp number
call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
button_color: "#FF6550", // Color of button
position: "left", // Position may be 'right' or 'left'
order: "call,whatsapp", // Order of buttons
};
var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
setTimeout(function(){
// Bu #willRemove id'li script tag'ı kendini 10 milisaniye sonra imha edecek...
document.getElementById('willRemove').remove();
},10);
</script>
stackoverflow'da sizinkine benzer bir soru sorulmuş. Kendimce biraz yorum ekleyerek paylaşıyorum:
Array.forEach döngüsünü break çağırır gibi nasıl sonlandırabilirim?
[1,2,3].forEach(function(el) {
if(el === 1) break;
});
Bunu forEach
fonksiyonunda nasıl yapabilirim? Ben return;
, return:false;
ve break
denedim... Ama break
patlıyor ve return
de döngüyü sonlandırmıyor.
Doğru Cevap:
forEach
içinde break
ile döngüyü sonlandırma özelliği yok. Eğer for
kullanamıyorsanız, ille de forEach
kullanacaksanız try-catch
içinde bir exception fırlatabilirsiniz.
var breakData = {};
try {
[1, 2, 3].forEach(function(el) {
if (el === 2) {
breakData.data = el; // bulduğumuz veriyi breakData objesine aktaralım.
throw breakData; // Objeyi exception (istisna) olarak fırlatalım.
}
});
}
catch (e) {
// Buraya gelindiyse ya throw breakData komutu çalışmıştır ya da başka bir hata oluşmuştur.
// Eğer oluşan exception'da data değeri yoksa bizim oluşturduğumuz hata dışında bir hata oluşmuşsa bunu da görelim.
if(!e.data) console.error(e);
}
// Döngü sonucu oluşan verimiz breakData objesindeki data key'inde.
console.log(breakData.data);
NOT: Kodlarda yaptığım değişikliği test etmedim. Sorun yaşarsanız direkt stackoverflow'daki örneği inceleyebilirsiniz.
Kaynak: https://stackoverflow.com/questions/2641347/short-circuit-array-foreach-like-calling-break
Sizin sorunuza gelecek olursak kodunuzu şu şekilde düzenleyebilirsiniz:
async function getData(data) {
try {
data.forEach(async proxy => {
const content = await arrow(proxy);
if(content.includes("Your file is ready")) {
throw { success: content };
}
});
}
catch(e) {
if(!e.success) {
console.error("Hata oluştu", e);
return false;
}
return e.success;
}
return undefined;
}
Ama bence forEach yerine doğrudan for kullanın.
Böylece throw
veya break
kullanmak zorunda kalmazsınız.
async function getData(data) {
for(let i = 0; i < data.length; i++) {
const proxy = data[i];
const content = await arrow(proxy);
if(content.includes("Your file is ready")) return content;
}
return null;
}
Veya döngü yerine Array.find kullanın. find, bulduğu ilk elemanı döndürür. Bulamazsa undefined döner.
find içinde hiç async fonksiyon kullanmamıştım ama denemek lazım...
async function getData(data) {
return data.find(
async (proxy) => (await arrow(proxy)).includes("Your file is ready")
);
}
JQuery ile <link>
elementinin href attribute'sini değiştirebileceğiniz bir örnek yapalım.
href değerini değiştirmek isteyeceğiniz elemente "data-style-mode" diye bir attribute verelim ki seçebilelim.
<link rel="stylesheet" href="assets/styles/light.css" data-style-mode="light" />
// Elementi jquery ile seçelim.
const $styleElement = $('[data-style-mode]');
// Mod değiştiren fonksiyon
function setStyleMode(type='light') {
if(type=='dark') $styleElement.attr('href', 'assets/styles/dark.css').attr('data-style-mode', 'dark');
else if(type=='light') $styleElement.attr('href', 'assets/styles/light.css').attr('data-style-mode', 'light');
}
// Modu toggle eden fonksiyon
function toggleStyleMode() {
const currentMode = $styleElement.attr('data-style-mode');
setStyleMode(currentMode=='light' ? 'dark' : 'light');
}
Sayfanın modunu anlık olarak güncelleyecektir. Ama sayfa yenilendiğinde veya başka bir sayfaya geçildiğinde bu ayar iptal olmuş olacak.
Kalıcılığı sağlamak için mevcut modu cookie'lere yazabilir ve sunucu taraflı bir kontrolle ilk yüklenen stil dosyasını cookie'deki stil dosyasıyla değiştirebilirsiniz.
JQuery kullanıyorsanız kolay cookie yönetimi için https://github.com/js-cookie/js-cookie projesinden faydalanabilirsiniz.
CDN için: https://cdnjs.com/libraries/js-cookie
Yok ben sunucu tarafına bu işi taşımak istemiyorum, front-end'de halledelim derseniz de localStorage'dan yardım alabilirsiniz.
<head>
<!-- head tag'ı içerikleri -->
<link rel="stylesheet" href="assets/styles/light.css" data-style-mode="light" />
<script>
const $styleElement = $('[data-style-mode]');
if(localStorage.getItem('style-mode')) {
const mode = localStorage.getItem('style-mode');
if(mode=='dark') {
$styleElement.attr('data-style-mode', 'dark').attr('href', 'assets/styles/dark.css');
}
}
</script>
</head>
<body>
<!-- body tag'ı içerikleri -->
<script>
// Mod değiştiren fonksiyon
function setStyleMode(type='light') {
if(type=='dark') $styleElement.attr('href', 'assets/styles/dark.css').attr('data-style-mode', 'dark');
else if(type=='light') $styleElement.attr('href', 'assets/styles/light.css').attr('data-style-mode', 'light');
localStorage.setItem('style-mode', type);
}
// Modu toggle eden fonksiyon
function toggleStyleMode() {
const currentMode = $styleElement.attr('data-style-mode');
const targetMode = currentMode=='light' ? 'dark' : 'light';
setStyleMode(targetMode);
return targetMode;
}
</script>
</body>
@sarjaleti'nin verdiği cevaba biraz javascript eklemenizde mahzur yoksa alternatif olarak şu da mümkün:
- Tüm sayfayı kapsayıcı içine alın. Sonra bu kapsayıcıyı dil sayısı kadar çoğaltın. Her kapsayıcıya da attribute olarak dili yazın.
- Javascript ile body'ye aktif dili attribute olarak ekletin.
- CSS ile body attribute'sine göre hangi dilin görüneceğini belirtin.
<head>
<style>
body > .page-content { display:none; }
body[data-lang="tr"] > .page-content[data-lang="tr] { display:block; }
body[data-lang="en"] > .page-content[data-lang="en] { display:block; }
body[data-lang="es"] > .page-content[data-lang="es] { display:block; }
</style>
<script>
// Dil değiştiren fonksiyon
function changeLanguage(langCode="tr") {
document.body.setAttribute("data-lang", langCode);
}
// Sayfa açılışında aktif olacak dili belirleyelim.
// body elementi onload olduğunda bu veri kullanılarak changeLanguage() fonksiyonu çağırılacak.
const startLanguage = "tr";
</script>
</head>
<body onload="changeLanguage(startLanguage);">
<div class="language-selector">
<button onclick="changeLanguage("tr");">TR</button>
<button onclick="changeLanguage("en");">EN</button>
<button onclick="changeLanguage("es");">ES</button>
</div>
<section class="page-container" data-lang="tr">
Tüm sayfanın Türkçe içerikli HTML kodu burada barınacak.
</section>
<section class="page-container" data-lang="en">
Tüm sayfanın İngilizce içerikli HTML kodu burada barınacak.
</section>
<section class="page-container" data-lang="es">
Tüm sayfanın İspanyolca içerikli HTML kodu burada barınacak.
</section>
</body>
Bu kurguyu sitenizdeki tüm sayfalara uygulamalısınız. Ama bazı sorunlarla karşılaşmış olacaksınız.
- Başka bir sayfaya geçtiğinizde seçtiğiniz dil kaybolacak ve ana dile ("tr") dönmüş olacaksınız.
- Siteyi kapatıp tekrar açtığınızda seçtiğiniz dil kaybolacak ve yeniden dil seçmek zorunda kalacaksınız.
Bu durumda seçilen dili tarayıcıya kaydetmek ve sayfa açıldığında kayıtlı bir dil olup olmadığını kontrol edip direkt o dili aktif etmek gerekir.
Yukarıda head tag'ında bulunan script tag'ını şu şekilde değiştirebiliriz:
// Dil değiştiren fonksiyon
function changeLanguage(langCode="tr") {
document.body.setAttribute("data-lang", langCode);
// seçilen dili local storage'a kaydedelim:
localStorage.setItem("selected-language", langCode);
}
// Daha önce local storage'a yazılmış dil verisini alalım.
const storagedLanguage = localStorage.getItem("selected-languge");
// Local storage'dan dil verisi alabildiysek bunu kullanalım. Bulamadıysak varsayılan dilimizi kullanalım.
const startLanguage = storagedLanguage ? storagedLanguage : "tr";
2 yolla yapabilirsiniz:
1) Veriyi GET Parametresi Olarak Yollamak
Ufak bir bilgi aktarmak istiyorsanız (silindi, güncellendi gibi) a.php'deki link'inizde url parametresine bu veriyi ekleyebilir, b.php'de de yine javascript ile url'i okuyarak parametreleri alabilirsiniz.
Örn:
a.php
<a href="b.php?isim=İlker&sehir=Mersin">İsim ve Şehir verilerini gönder...</a>
b.php
// url'den gelen b.php?isim=İlker&sehir=Mersin verisini parçalayacağız...
// Url'deki parametreler kısmını alalım.
let urlParameters = window.location.search;
// Çıktı: "?isim=İlker&sehir=Mersin"
// Aldığımız veride "?" karakteri varsa bundan sonrasını alalım. Yoksa bi'şey alamayız...
urlParameters = urlParameters.includes('?') ? urlParameters.split('?')[1] : "";
// Çıktı: "isim=İlker&sehir=Mersin"
// Parametreleri birbirinden ayırarak bir array elde edelim:
urlParameters = urlParameters.split("&");
// Çıktı: ["isim=İlker", "sehir=Mersin"]
// Bir js objesinde değerleri key-value şeklinde oluşturalım.
const urlParametersObj = {};
urlParameters.map(x=>{
const splitted = x.split("="); // "isim=İlker" -> ["isim", "İlker"]
const key = splitted[0]; // key = "isim"
const value = splitted.length ? splitted[1] : null; // value = "İlker"
if(Array.isArray(urlParametersObs[key]) urlParametersObj[key].push(value);
else urlParametersObj[key] = [value];
});
// Çıktı: urlParametersObj = { "isim": ["İlker"], "sehir": ["Mersin"] }
b.php'deki tüm bu işlemleri bir fonksiyon haline getirirseniz hem bu projenizde hem başka projelerinizde tekrar tekrar kullanabilirsiniz:
const getUrlParameters = function() {
let urlParameters = window.location.search;
urlParameters = urlParameters.includes('?') ? urlParameters.split('?')[1] : "";
urlParameters = urlParameters.split("&");
const urlParametersObj = {};
urlParameters.map(x=>{
const splitted = x.split("=");
if(Array.isArray(urlParametersObs[splitted[0]]) urlParametersObj[splitted[0]].push(splitted.length ? splitted[1] : null);
else urlParametersObj[splitted[0]] = [splitted.length ? splitted[1] : null];
});
return urlParametersObj;
}
// Kullanırken:
var urlParameters = getUrlParameters();
console.log(urlParameters); // Çıktı: { "isim": ["İlker"], "sehir": ["Mersin"] }
console.log("isim: ", urlParameters.isim[0]); // Çıktı: "İlker"
console.log(Object.keys(urlParameters)); // Çıktı: ["isim", "sehir"]
console.log(Object.values(urlParameters)); // Çıktı: [["İlker"], ["Mersin"]]
console.log(Object.entries(urlParameters)); // Çıktı: [["isim", ["İlker"]], ["sehir", ["Mersin"]]]
Burada value değerlerini dizi olarak almamızın nedeni, aynı key'den birkaç tane gelme ihtimalidir.
Örneğin şu parametreler için: ?isim=İlker&isim=Tayfun&meslek=Yazılım 2 tane isim parametresi var.
Şu sonuç üretilecek: { "isim": ["İlker", "Tayfun"], "meslek": ["Yazılım"] }
2) SessionStorage Kullanmak
Veriyi tarayıcının session storage alanına yazarsınız.
- Veri, post metodunda olduğu gibi, URL'de görünmez.
- Veriyi sadece sonraki sayfada değil, bundan sonra kullanıcının gezdiği her sayfada kullanabilirsiniz. Kullanıcı siteyi kapatana kadar bu veri erişiminize açık olur. Yani veri kullanıcının tarayıcısına kaydedilir.
- GET parametresiyle gönderimdeki gibi belli bir formata uymanız gerekmez. İstediğiniz formattaki bir veriyi (html, json, düz yazı...) string haline getirip tutabilirsiniz.
- Veriyi sadece sonraki sayfada değil, o an bulunduğunuz sayfada da kontrol edebilirsiniz.
Veriyi session storage'a yazmak için ona bir key belirlersiniz. Veriyi string olarak session storage'a yazarsınız.
Veriyi okumak için de session storage'daki key'i kullanırsınız. Eğer json gibi bir veri tuttuysanız veriyi string'ten tekrar json'a çevirmelisiniz.
Örnek:
a.php
<textarea id="gonderilecek-veri" placeholder="Tarayıcıya kaydedilecek veriyi yazın"></textarea>
<button id="gonderici-buton">Verileri tarayıcıya kaydet ve beni b.php'ye yönlendir...</button>
<script>
const $textareaElement = document.getElementById("gonderilecek-veri");
// Butona tıklandığında...
document.getElementById("gonderici-buton").addEventListener("click", function(){
// textarea'daki string'i al.
const data = $textareaElement.value;
// session storage'a "verilerim" key'iyle yaz.
sessionStorage.setItem("verilerim", data);
});
</script>
Diğer sayfalardan veriyi okumak için:
b.php
<div id="kayitli-veriler"></div>
<script>
const $yazilacakElement = document.getElementById("kayitli-veriler");
// session storage'da "verilerim" key'iyle bir kayıt var mı diye kontrol et.
const data = sessionStorage.getItem("verilerim"); // Eğer yoksa null döner.
// Eğer session storage'da "verilerim" key'iyle kayıt bulabilmişsek div'e yazdıralım.
if(!data) $yazilacakElement.value = "Henüz veri kaydedilmemiş!";
else $yazilacakElement.value = data;
</script>
Session storage'a sizin siteniz tarafından yazılmış veriler yalnızca sizin siteniz üzerinden okunabilir.
Yani "Ben session storage'a veri yazarsam başka bir site benim bu verilerimi okuyabilir mi?" diye endişelenmenize gerek yok.
Session storage, kullanıcı sitenizden çıktığı zaman sonlanır. Yani veri günlerce tarayıcıda saklanmaz.
Yine de bu alan kullanıcının bulup düzenleyebileceği bir alandır.
"Sayfayı İncele" > "Application" > "Session Storage" yolunu izleyerek kullanıcı bu veriyi görebilir, değiştirebilir, silebilir.
Yani şifre gibi hassas veriler burada saklanmamalıdır.
Session Storage her zaman string veri tutar. (Belki sayı da tutuyordur.)
Ama siz json veri tutmak istiyorsanız onu da string'e çevirmelisiniz.
Diyelim ki aaa adında bir js objeniz var ve bunu session storage'da saklamak istiyorsunuz:
sessionStorage.setItem("istediğim_bir_key", JSON.stringify(aaa));
Bu veriyi tekrar js objesi halinde almak için ise:
const verim = JSON.parse(sessionStorage.getItem("istediğim_bir_key"));
Veriyi storage'dan silmek istersek:
sessionStorage.removeItem("istediğim_bir_key");
Session storage'da html veri de tutabilirsiniz. Yani js ile bir html kodunu okuyup string olarak session storage'a yazarsınız.
Başka bir sayfada da bu kodu js ile ekrana basarsınız. Bir html kod bloğunu olduğu gibi başka bir sayfaya taşımış olursunuz.
NOT: Tarayıcıdan tarayıcıya farklılık gösterebilir ama Chrome için session storage'da tutabileceğiniz maksimum veri 5 mb'tır.
Eğer kullanıcının tarayıcısında session storage'da tutmaya çalıştığınız toplam veri 5mb'tan fazlaysa kullanıcı hata alır.
Merhaba. Evet, biraz sıkıntılı bir iş otomatik yükseklik vermek. Yani ufak bir takla atmak gerekiyor.
Şöyle bir kurgu önerebilirim:
- Metin sayfaya yüklendiğinde container metin yüksekliğindedir. O anda yüksekliği js yardımıyla alıp container'a attribute olarak kaydedin.
- Container'a basıldığında yüksekliği 10vh, tekrar basıldığında da attribute değerini alsın.
- Bu işlemleri yapan bir fonksiyon oluşturalım ki başka elementlerde veya projelerde de kullanabilelim...
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae amet, nostrum eligendi aliquid deleniti, et nisi ipsa nesciunt illum quidem maiores temporibus. Laboriosam recusandae quasi enim error non sequi quam.<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium nihil facilis consectetur vitae temporibus quis quibusdam iure qui tempore mollitia, cum voluptas reiciendis minus rem similique architecto dolores totam laborum!<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit ducimus cum repellat eum. Dolorem nobis, molestiae, natus cumque velit temporibus laudantium aliquam facere cum animi nesciunt sed soluta iusto. Nam.
</div>
.container {
width:300px;
overflow-y:hidden;
border:1px solid #ccc;
padding:10px;
transition:height .5s ease 0s;
}
CSS kısmında dikkat: Elemente height değerini burada vermemeniz gerekiyor.
Çünkü javascript, elementin açıkkenki durumda yüksekliğini görebilmeli.
Elemente yükseklik değerini javascript'le vermeniz gerekiyor. Aşağıda örneği var.
function example(selector, closedHeight, openedHeight="auto", startStatus=false) {
// Elementi seçip değişkene alalım.
const $this = $(selector);
// Elementin açık ve kapalı hallerinin alacağı yükseklikleri attribute olarak kaydedelim.
$this.attr('data-orj-height', openedHeight=="auto" ? $this.outerHeight() : openedHeight);
$this.attr('data-closed-height', closedHeight);
// Container'a tıklandığında açıksa kapalı kapalıysa açık yapacak olay dinleyici:
$this.on("click",function(){
// Elementte data-opened="false" diye bir attibute varsa element kapalı haldedir. Açılsın...
if($this.attr('data-opened')=="false") {
$this.attr('data-opened',"true");
$this.height($this.attr('data-orj-height'));
}
// Elementte data-opened="true" diye bir attibute varsa element açık haldedir. Kapatılsın...
else {
$this.attr('data-opened',"false");
$this.height($this.attr('data-closed-height'));
}
});
// Başlangıç durumu olarak kapalı olacaksa elementi kapalı hale getirelim.
if(!startStatus) {
$this.height(closedHeight);
$this.attr('data-opened',"false");
}
}
// Parametreler:
// 1) Seçici,
// 2) Element açık olduğunda alacağı yükseklik,
// 3) Element kapalı olduğunda alacağı yükseklik (Varsayılan:"auto")
// 4) Element başlangıçta açık olacaksa true, kapalı olacaksa false. (Varsayılan:false)
example(".container", "auto", "10vh", false);
Bu örneğin çalışan halini codepen'de oluşturdum:
https://codepen.io/ebykdrms/pen/yLKZvqX
Tabi burada container'a tıklanınca açık/kapalı toggle yapıyor ama siz bunu yapmasını istemiyor olabilirsiniz. Yani container'a değil de container'ın içindeki bir butona basınca açılıp kapanmasını istiyor da olabilirsiniz.
O zaman sadece $this.on("click",function() {
yazan satırı düzenlemeniz yeterli olur.
Örn: $this.find(".close-button").on("click", function(){
gibi...