এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল(৫) লোকাল স্টোরেজ


লোকাল স্টোরেজের সাহায্যে ওয়েব এপ্লিকেশন ইউজারের ব্রাউজারে ডেটা সংরক্ষণ করতে পারে।

এইচটিএমএল(৫) এর পূর্বে এপ্লিকেশন ডেটা সংরক্ষণের জন্য কুকিজ ব্যবহার করা হতো। কুকিজ ব্যবহারে একটি সাইটের জন্য সর্বোচ্চ ৫ এমবি পর্যন্ত ডেটা স্টোর করা যেত(ব্রাউজারভেদে ভিন্ন হতে পারে)

লোকাল স্টোরেজ ৫ এমবি থেকে অনেক বেশি ডেটা সংরক্ষণ করতে পারে। লোকালস্টোরেজ ডোমেইন এবং প্রোটোকল অনুসারে তৈরি হয়, একই উৎসের সকল পেজ ডেটা সংরক্ষণ এবং স্টোর করতে পারে।


ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৪.০, ইন্টারনেট এক্সপ্লোরার ৮.০, ফায়ারফক্স ৩.৫, সাফারি ৪.০ এবং অপেরা ১১.৫ ভার্সন থেকে স্টোরেজ সাপোর্ট করে।


এইচটিএমএল লোকাল স্টোরেজ অবজেক্ট

ক্লায়েন্ট সাইটে ডেটা স্টোর করার জন্য এইচটিএমএল লোকাল স্টোরেজে দুইটি অবজেক্ট রয়েছেঃ

  • window.localStorage - মেয়াদ ছাড়া ডেটা সংরক্ষণ করে
  • window.sessionStorage - একটি সেশনের জন্য ডেটা সংরক্ষণ করে(ব্রাউজারের ট্যাব বন্ধ করলেই ডেটা মুছে ফেলবে)

লোকাল স্টোরেজ ব্যবহারের পূর্বে ব্রাউজার লোকালস্টোরেজ ও সেশনস্টোরেজ সাপোর্ট করে কিনা দেখে নিতে হবেঃ

if (typeof(Storage) !== "undefined") {
    // Code here...
} else {
    // Sorry!No Web Storage support...
}

localStorage অবজেক্ট

localStorage অবজেক্টে ডেটা সংরক্ষণের পর এটি আপনি সবসময় ব্যবহার করতে পারবেন। ব্রাউজার বন্ধ করে দিলেও ডেটা ডিলেট হবে না। এটি পরবর্তী যেকোন সময় এক্সেস করা যাবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল localStorage অবজেক্ট</title>
</head>
<body>

<div id="lname"></div>

<script>

if (typeof(Storage) !== "undefined") {
    localStorage.setItem("lastname", "রহমান");

    document.getElementById("lname").innerHTML = localStorage.getItem("lastname");

} else {
    document.getElementById("lname").innerHTML = " দুঃখিত, আপনার ব্রাউজার ওয়েব স্টোরেজ সমর্থন করে না।";
}
</script>


</body>
</html>

ফলাফল




উদাহরণের বর্ণনাঃ

  • লোকালস্টোরেজের name এবং value এর জোড়া তৈরি করুন। যেমনঃ name="lastname" এবং value="Aziz"
  • "lastname" এর ভ্যালু এক্সেস করে id="result" যুক্ত এলিমেন্টে রাখুন।

উপরের উদাহরণটি নিচের মত করেও লেখা যায়ঃ

localStorage.lastname = "Rahman";
document.getElementById("result").innerHTML =
localStorage.lastname;

লোকালস্টোরেজের "lastname" আইটেমকে ডিলেট করার পদ্ধতিঃ

localStorage.removeItem("lastname");


বিঃদ্রঃ Name/value জোড়া সবসময় স্ট্রিং আকারে স্টোর করা হয়।

নিচে একটি কাউন্টারের সাহায্যে লোকালস্টোরেজের উদাহরণ দেওয়া হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
   <script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("output").innerHTML = " আপনি বাটনটি ক্লিক করেছেন " + localStorage.clickcount + " বার।";
    } else {
        document.getElementById("output").innerHTML = " দুঃখিত, আপনার ব্রাউজার ওয়েব স্টোরেজ সমর্থন করে না...";
    }
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button">এখানে চাপুন!</button></p>
<div id="output"></div>
<p> গননা বৃদ্ধি দেখার জন্য বাটনটি চাপুন ।</p>
<p> ব্রাউজারের ট্যাব বন্ধ করুন (অথবা উইন্ডো),এবং আবার চেষ্টা করুন,এবং কাউন্টার আবার গননা করা শুরু করবে (এটি রিসেট না )</p>
</body>

</body>
</html>

ফলাফল




sessionStorage অবজেক্ট

sessionStorage অবজেক্ট ব্রাউজারে শুধুমাত্র একটি সেশনের জন্য ডেটা স্টোর করে। এর অর্থ, ব্রাউজারের ট্যাব বন্ধ করে দিলে ডেটাও ডিলেট হয়ে যাবে।

নিচের উদাহরণে একটি কাউন্টারের সাহায্যে সেশনস্টোরেজ বুঝানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল sessionStorage অবজেক্ট</title>

<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount) {
            sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
        } else {
            sessionStorage.clickcount = 1;
        }
        document.getElementById("output").innerHTML = " আপনি এই সেশনে  বাটনটি ক্লিক করেছেন " + sessionStorage.clickcount + " বার।";
    } else {
        document.getElementById("output").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
</script>

</head>
<body>

<p><button onclick="clickCounter()" type="button"> এখানে চাপুন!</button></p>
<div id="output"></div>
<p> গননা বৃদ্ধি দেখার জন্য বাটনটি চাপুন ।</p>
<p> ব্রাউজারের ট্যাব বন্ধ করুন (অথবা উইন্ডো),এবং আবার চেষ্টা করুন,এবং কাউন্টার আবার গননা করা শুরু করবে (এটি রিসেট না )</p>

</body>
</html>

ফলাফল