HTML5 Web 存储是本地存储,存储在客户端,包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的,通常以字符串存储。
localStorage
localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
-
// 1、保存数据到本地
-
// 第一个参数是保存的变量名,第二个是赋给变量的值
-
localStorage.setItem(
'Author',
'local');
-
// 2、从本地存储获取数据
-
localStorage.getItem(
'Author');
-
// 3、从本地存储删除某个已保存的数据
-
localStorage.removeItem(
'Author');
-
// 4、清除所有保存的数据
-
localStorage.clear();
sessionStorage
sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
-
// 1、保存数据到本地
-
// 第一个参数是保存的变量名,第二个是赋给变量的值
-
sessionStorage.setItem(
'Author',
'session');
-
// 2、从本地存储获取数据
-
sessionStorage.getItem(
'Author');
-
// 3、从本地存储删除某个已保存的数据
-
sessionStorage.removeItem(
'Author');
-
// 4、清除所有保存的数据
-
sessionStorage.clear();
复杂数据存储
上面都是对于简单的数据类型的存储,但当要存储的数据是一个对象或是数组的时候,直接存储是不行的
错误的存储:
-
var user = {
-
username:
'liu',
-
password:
'123456'
-
};
-
sessionStorage.setItem(
'user', user);
-
console.log(sessionStorage.getItem(
'user'));
这个时候,就需要转换数据格式。
存储数据前:利用JSON.stringify将对象转换成字符串
获取数据后:利用JSON.parse将字符串转换成对象
-
var user = {
-
username:
'liu',
-
password:
'123456'
-
};
-
user =
JSON.stringify(user);
-
sessionStorage.setItem(
'user', user);
-
var account = sessionStorage.getItem(
'user');
-
console.log(account);
-
account =
JSON.parse(account)
-
console.log(account);
<li class="tool-item tool-active is-like tool-clicked"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count">6</span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;" data-report-click="{"mod":"1582594662_002"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/sleepwalker_1992"> <img src="https://profile.csdnimg.cn/3/7/6/3_sleepwalker_1992" class="avatar_pic" username="sleepwalker_1992"> <img src="https://g.csdnimg.cn/static/user-reg-year/2x/5.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/sleepwalker_1992" data-report-click="{"mod":"popu_379"}" target="_blank">sleepwalker_1992</a></span> </div> <div class="text"><span>发布了199 篇原创文章</span> · <span>获赞 214</span> · <span>访问量 48万+</span></div> </div> <div class="right-message"> <a href="https://bbs.csdn.net/topics/395527013" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div>