欢迎光临
我们一直在努力

JavaScript | H5本地存储之localStorage、sessionStorage

localStorage/sessionStorage是在html5中新加入的技术,两者除了数据的时效性不一样之外,其他都一样。大小一般为5MB,存储的时候,仅仅在客户端存储,不会随着请求的调用而传递到服务器。

localStorage不手动删除则永久有效,sessionStorage仅在当前会话有效,sessionStorage不能跨页面访问,只局限在当前的标签页,sessionStorage各种操作与localStorage一样。

使用方式

  • localStorage.setItem(key,value) 保存或设置数据,如果key已存在,则key对应的value将被覆盖,不过不存在key,则添加
  • localStorage.getItem(key) 获取key对应的value,value不存在返回null
  • localStorage.key(index) 获取指定下标位置的key,不存在返回null
  • localStorage.length 获取数据条数(长度)
  • localStorage.clear() 将同域名下的所有数据都清空
  • localStorage.removeItem('key') 删除某个键值对
//设置或更新
localStorage.setItem('username','sanrenyan');
localStorage.setItem('password','***');
localStorage.setItem('password','******');

//获取key对应的值
console.log(localStorage.getItem('username'));

//获取下标对应的key
console.log(localStorage.key(1));

// 获取长度
console.log(localStorage.length);

// 删除对应key
localStorage.removeItem('password');

// 找不到会返回null
console.log(localStorage.getItem('password'));

//清除整个localStorage
localStorage.clear();

localStorage 的优势

  •  1、localStorage 拓展了 cookie 的 4K 限制。
  •  2、localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库,相比于 cookie 可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的。

localStorage 的局限

  •  1、浏览器的大小不统一,并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
  •  2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。
  •  3、localStorage在浏览器的隐私模式下面是不可读取的。
  •  4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
  •  5、localStorage不能被爬虫抓取到。

cookie、localStorage、sessionStorage异同

数据存储时间

  • cookie 可以自己设置失效时间
  • localStorage 不主动清除,则永久存储
  • sessionStorage 当前页面关闭时被删除

大小

  • cookie 最大4kb
  • localStorage 最大5MB
  • sessionStorage 最大5MB

请求是否携带

  • cookie 每次请求会携带在请求头中
  • localStorage 不携带,仅在客户端存储
  • sessionStorage 不携带,仅在客户端存储

易用性

  • cookie 原生api使用不友好,需自己二次封装
  • localStorage 原生接口可使用,也可以自己二次封装
  • sessionStorage 原生接口可使用,也可以自己二次封装

推荐在项目中使用storage存储,cookie存储数据过多,会造成性能问题。

新增代码实例

//写入localStorage有三种方法
if(!window.localStorage){
    var e = new Error('不支持localstorage');
    throw e;
} else {
    var storage = window.localStorage;
    storage.a = 'a';
    storage['b'] = 'b';
    storage.setItem('c','c');  //推荐
}

//localStorage只支持String类型的存储 即便以number存进去,也会自动转化为字符串
if(!window.localStorage){
    var e = new Error('不支持localstorage');
    throw e;
} else {
    var storage = window.localStorage;
    storage.setItem('d',4);  //推荐
    console.log(typeof storage.getItem('d')); //string
    //除此之外还可以使用点方法和中括号访问value,但官方不建议我们这样做
}

//localStorage的修改只需要再次对key设置value
if(!window.localStorage){
    var e = new Error('不支持localstorage');
    throw e;
} else {
    var storage = window.localStorage;
    storage.setItem('d','new4');  //第二次设置值将覆盖上一次
}

//localstorage可以通过clear()清空,或者通过remove(key)删除对应键
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

//使用 key() 方法,可以通过索引获取对应的键
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);
}

JSON相关注意事项

一般我们会将 JSON 存入 localStorage 中,但是在 localStorage 会自动将 localStorage 转换成为字符串形式。

这个时候我们可以使用 JSON.stringify() 这个方法,来将 JSON 转换成为 JSON 字符串。

if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    var storage=window.localStorage;
    var data={
        name:'xiecanyong',
        sex:'man',
        hobby:'program'
    };
    var d=JSON.stringify(data);
    storage.setItem("data",d);
    console.log(storage.data);
}

读取之后要将 JSON 字符串转换成为 JSON 对象,使用 JSON.parse() 方法:

var storage=window.localStorage;
var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | H5本地存储之localStorage、sessionStorage
分享到: 更多 (0)

评论 抢沙发

7 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏