HTML5 Web 存储(localStorage和sessionStorage)

HTML5 Web 存储是本地存储,存储在客户端,包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的,通常以字符串存储。

localStorage

localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

  1. // 1、保存数据到本地
  2. // 第一个参数是保存的变量名,第二个是赋给变量的值
  3. localStorage.setItem('Author', 'local');
  4. // 2、从本地存储获取数据
  5. localStorage.getItem('Author');
  6. // 3、从本地存储删除某个已保存的数据
  7. localStorage.removeItem('Author');
  8. // 4、清除所有保存的数据
  9. localStorage.clear();

sessionStorage

sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

  1. // 1、保存数据到本地
  2. // 第一个参数是保存的变量名,第二个是赋给变量的值
  3. sessionStorage.setItem('Author', 'session');
  4. // 2、从本地存储获取数据
  5. sessionStorage.getItem('Author');
  6. // 3、从本地存储删除某个已保存的数据
  7. sessionStorage.removeItem('Author');
  8. // 4、清除所有保存的数据
  9. sessionStorage.clear();

复杂数据存储

上面都是对于简单的数据类型的存储,但当要存储的数据是一个对象或是数组的时候,直接存储是不行的

错误的存储:

  1. var user = {
  2. username: 'liu',
  3. password: '123456'
  4. };
  5. sessionStorage.setItem('user', user);
  6. console.log(sessionStorage.getItem('user'));

这个时候,就需要转换数据格式。

存储数据前:利用JSON.stringify将对象转换成字符串

获取数据后:利用JSON.parse将字符串转换成对象

  1. var user = {
  2. username: 'liu',
  3. password: '123456'
  4. };
  5. user = JSON.stringify(user);
  6. sessionStorage.setItem('user', user);
  7. var account = sessionStorage.getItem('user');
  8. console.log(account);
  9. account = JSON.parse(account)
  10. 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="{&quot;mod&quot;:&quot;popu_824&quot;}"><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="{&quot;mod&quot;:&quot;1582594662_002&quot;}"><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="{&quot;mod&quot;:&quot;popu_379&quot;}" 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="{&quot;mod&quot;:&quot;popu_379&quot;}">关注</a>
                                    </div>
                            </div>
                    </div>
    
发布了38 篇原创文章 · 获赞 2 · 访问量 6256
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览