前端存储 (2) - sessionStorage ,localStorage

ARGUS 发布于2019-08-22 18:45 / 1951人阅读

摘要：存储目录定义生命周期语法存储大小注意点定义浏览器提供的，可以在当前域名下存储信息，只能存储生命周期是关闭当前页就清楚了，一直都在，关闭浏览器也会存在语法存储王五获取清除存储大小左右测试当前浏览器存储大小注意点存储的时候要是，不要用数组或者

sessionStorage ,localStorage 存储 目录

定义

生命周期

语法

存储大小

注意点

定义

sessionStorage ,localStorage 浏览器提供的api，
可以在当前域名下存储信息，只能存储 string

生命周期

sessionStorage 是关闭当前 tab页就清楚了，localStorage 一直都在，关闭浏览器也会存在

语法

存储

sessionStorage.setItem(key,value);

 sessionStorage.setItem("userName","王五");

获取

var result = sessionStorage.getItem(key);

清除
sessionStorage.clear();

存储大小 5Mb 左右

测试当前浏览器存储大小 http://dev-test.nemikor.com/w...

注意点

存储的时候 value 要是 string ，不要用数组或者对象

数组
// 错误处理方式
sessionStorage.setItem("a",[1,2,3,4,5])
sessionStorage.getItem("a")   // "1,2,3,4,5"  这样处理的话，返回成了一个 string，得自己在转换成 数组

// 正确处理方式
sessionStorage.setItem("a",JSON.stringify([1,2,3,4,5]))
JSON.parse(sessionStorage.getItem("a") )  // [1,2,3,4];


对象
// 错误处理方式
sessionStorage.setItem("a",{id:"134",name:"33"})
sessionStorage.getItem("a")  //  "[object Object]"  ,返回的这种数据都没得办法处理


// 正确处理方式
sessionStorage.setItem("a",JSON.stringify({id:"134",name:"33"}))
JSON.parse(sessionStorage.getItem("a") ); //  {id:"134",name:"33"}

常见使用方式

sessionStorage 可以存储些用户信息，在浏览器关闭前不怎么改变的比方下拉框

getSelectData("userType",function(data){

  console.log(data);

});


 function  getSelectData(key,callback){

     var storeMap = {};

     var key_url = {
     "user": "api/user",
     "orderStatus":"api/order/status",
     "userType": "api/user/type"

     }

     var result = getStore(key);
     if(result){
        callback(result);
        return ;
     }

     $.get(key_url[key],).done(function(data){
        setStore(key,data);
        callback(data);
     });

     function setStore(key,value){
            sessionStorage.setItem(key,JSON.stringify(value))
     }

     function getStore(key){
        var result = sessionStorage.getItem(key);
        if(!result){
            return null;
        }
        return JSON.parse(result)
     }

 }

云服务器 GPU云服务器 localstorage存储存储localstorage 免费localstorage存储对象 Sessionstorage

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96159.html

[聊一聊系列]聊一聊前端存储那些事儿

摘要：如图图顾名思义，，是级别的存储。如笔者写的一篇浅析文章聊一聊百度移动端首页前端速度那些事儿读者们可以尝试使用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/frontenddriver 在web开发越来越复杂的今天，前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。...

caige 2019-08-19 18:46 评论0 收藏0
前端存储 - localStorage

摘要：发布自的博客，欢迎大家转载，但是要注意注明出处介绍在中，引入了两个新的前端存储特性这两者非常相似，都是用来在前端保存一定量的数据，称为前端存储，但是这两者仍然存在一定区别生命周期的生命周期是永久的，即使关闭页面浏览器，其中的内容也不会消失，发布自Kindem的博客，欢迎大家转载，但是要注意注明出处 localStorage 介绍在HTML5中，引入了两个新的前端存储特性： loc...

DandJ 2019-08-22 18:34 评论0 收藏0
印象最深的一个bug：sessionStorage缓存在移动端失效

摘要：移动端缓存失效是我印象最深的一个之一，为啥呢，因为这个问题导致我加班到很晚。的生命周期是仅在当前会话下有效。引入了一个浏览器窗口的概念，是在同源的窗口中始终存在的数据。无bug，不程序：作为程序员的我，不是修bug就是在写bug的路上。　　移动端sessionStorage缓存失效是我印象最深的一个bug之一，为啥呢，因为这个问题导致我加班到很晚。在现在看来就是一个简单的概念问题。在我刚工作...

yuxue 2021-11-18 10:07 评论0 收藏0