HTML5 localStorage使用教程

原创

已于 2022-10-25 17:47:11 修改 · 701 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

于 2017-07-03 15:59:30 首次发布

本文介绍了HTML5中的localStorage特性，详细解释了如何使用localStorage进行客户端数据存储，包括数据的写入、读取、删除等操作，并提供了JSON数据存储的示例。

在客户端存储数据，HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

localStorage的使用遵循同源策略，对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

localStorage解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优势

1、localStorage拓展了cookie的4K限制

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

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage使用实例1：

 1 //localStorage的浏览器支持情况：
 2 
 3 //1. 判断浏览器是否支持localStorage这个属性
 4 if(！window.localStorage){
 5     alert("浏览器支持localstorage");
 6     return false;
 7 }else{
 8     //主逻辑业务
 9 }
10 
11 
12 //localStorage的写入、修改、删除、读取
13 
14 if(！window.localStorage){
15     alert("浏览器支持localstorage");
16     return false;
17 }else{
18     var storage=window.localStorage;
19     //写入或修改a字段
20     storage["a"]=1;
21     //写入或修改b字段
22     storage.b=1;
23