HTML5中的sessionStorage和localStorage

最新推荐文章于 2022-03-29 15:24:54 发布

前端爱好者。

最新推荐文章于 2022-03-29 15:24:54 发布

阅读量102

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jahbij12j&title=HTML5%E4%B8%AD%E7%9A%84sessionStorage%E5%92%8ClocalStorage

版权

前端专栏收录该内容

483 篇文章 4 订阅

订阅专栏

HTML5刚提出来的时候就有了一个很吸引人的地方：可以把数据存储在本地，不再需要Cookie之类的东西，而且对于数据的也不再局限于Cookie 4KB的限制了，可以说，本地存储是HTML5中最吸引人的一个技术话题，在HTML5中有sessionStorage和localStorage两种本地客户端技术，这两者之间的区别如下：

Web Storage 技术在web上存储数据即针对客户端本地；具体来说分为两种：
sessionStorage：
session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。

localStorage：
将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。

两者区别就是一个作为临时保存，一个拥有长期保存。

使用示例

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
</head>
<body>
   <h1>
       Web Storage 实验</h1>
   <div id="msg" style=" margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px; height: 100px;">
   </div>
   <input type="text" id="text" />
   <select id="type">
       <option value="session">sessionStorage</option>
       <option value="local">localStorage</option>
   </select>
   <button onclick="save();">
       保存数据</button>
   <button onclick="load();">
       读取数据</button>
   <script type="text/javascript">
       var msg = document.getElementById('msg'),
           text = document.getElementById('text'),
           type = document.getElementById('type');

       function save() {
           var str = text.value;
           var t = type.value;
           if (t == 'session') {
               sessionStorage.setItem('msg', str);
           } else {
               localStorage.setItem('msg', str);
           }
       }

       function load() {
           var t = type.value;
           if (t == 'session') {
               msg.innerHTML = sessionStorage.getItem('msg');
           } else {
               msg.innerHTML = localStorage.getItem('msg');
           }
       }
   
   </script>
</body>
</html> 
  

在chrome浏览器下看会有感觉的。

简单web留言板

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
</head>
<body>
   <h1>
       Web Storage 实验</h1>
   <div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
       min-height: 100px;">
   </div>
   <input type="text" id="text" />
   <button onclick="save();">
       留言</button>
   <button onclick="_clear();">
       清空</button>
   <script type="text/javascript">
       var msg = document.getElementById('msg'),
           text = document.getElementById('text');

       function save() {
           var str = text.value;
           var k = new Date().getTime();
           localStorage.setItem(k, str);
           init();
       }

       function init() {
           msg.innerHTML = '';
           var dom = '';
           for (var i = 0, len = localStorage.length; i < len; i  ) {
               dom  = '<div>'   localStorage.key(i)   ':'   localStorage.getItem(localStorage.key(i))   '</div>'
           }
           msg.innerHTML = dom;
       }

       function _clear() {
           msg.innerHTML = '';
           localStorage.clear();
       }
   
   </script>
</body>
</html> 
  

更复杂的运用中，可以将value值用作json字符串，以此达到用作数据表的目的；

前端爱好者。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中的sessionStorage和localStorage

HTML5刚提出来的时候就有了一个很吸引人的地方：可以把数据存储在本地，不再需要Cookie之类的东西，而且对于数据的也不再局限于Cookie 4KB的限制了，可以说，本地存储是HTML5中最吸引人的...
复制链接

扫一扫