web存储 localStorage与sessionStorage

来源：互联网发布：centos搭建网站编辑：程序博客网时间：2024/05/21 07:51

Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。

Web Storage又分为两种：

sessionStorage

localStorage

从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地；

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

不管是sessionStorage，还是localStorage，可使用的API都相同。

localStorage实例：

html代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/app.js"></script></head><body>    <textarea style="width:200px;height:200px" id="textarea"></textarea>    <button id="btn">保存</button></body></html>

js代码：

var textarea;var btn;window.onload = function(){    textarea = document.getElementById("textarea");    if(localStorage.text){        textarea.value = localStorage.text;    }    btn = document.getElementById("btn");    btn.onclick = function(){        localStorage.text = textarea.value;    }}

效果：

在文本框中输入后点击保存之后，就算刷新页面或这关闭后打开，输入的数据都会显示在文本框中。

sessionStorage实例：

html代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/app.js"></script></head><body>    <span id="txt">0</span>    <button id="btn">Add</button></body></html>

js代码：

var num = 0;var txt;var btn;window.onload = function(){    txt = document.getElementById("txt");    btn = document.getElementById("btn");    if(sessionStorage.num){        num = sessionStorage.num;    }else{        num = 0;    }    btn.onclick = function(){        num++;        sessionStorage.num = num;        showNum();    }}function showNum(){    txt.innerHTML = num;}

当你点击add按钮时会一直加1，刷新后点击add依然是从上次的数据继续加1，但如果浏览器关闭后重新打开就是从0开始加。

0 0