localStorage使用入门

最新推荐文章于 2024-07-06 09:30:00 发布
最新推荐文章于 2024-07-06 09:30:00 发布
阅读量404 收藏
点赞数

一、什么是localStorage、sessionStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

 

二、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来分析

 

三、localStorage的使用

localStorage的浏览器支持情况：

这里要特别声明一下，如果是使用IE浏览器的话，那么就要UserData来作为存储，这里主要讲解的是localStorage的内容，所以userData不做过多的解释，而且以博主个人的看法，也是没有必要去学习UserData的使用来的，因为目前的IE6/IE7属于淘汰的位置上，而且在如今的很多页面开发都会涉及到HTML5\CSS3等新兴的技术，所以在使用上面一般我们不会去对其进行兼容

首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性

复制代码 
if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务
        }
复制代码

 

localStorage的写入，localStorage的写入有三种方法，这里就一一介绍一下

复制代码 
if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }
复制代码

 

运行后的结果如下：

这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

最后在控制台上面打印出来的结果是:

不知道各位读者有没有注意到，刚刚存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。

localStorage的读取

复制代码 
if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);
        }
复制代码

 

这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取，不要问我这个为什么，因为这个我也不知道

我之前说过localStorage就是相当于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤

下面我们就来说一说localStorage的删、改这两个步骤

改这个步骤比较好理解，思路跟重新更改全局变量的值一样，这里我们就以一个为例来简单的说明一下

 

复制代码 
if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            // console.log(typeof storage["a"]);
            // console.log(typeof storage["b"]);
            // console.log(typeof storage["c"]);
            /*分割线*/
            storage.a=4;
            console.log(storage.a);
        }
复制代码

 

这个在控制台上面我们就可以看到已经a键已经被更改为4了

localStorage的删除

1、将localStorage的所有内容清除

复制代码 
var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);
复制代码

 

2、 将localStorage中的某个键值对删除

 

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

 

控制台查看结果

localStorage的键获取

复制代码 
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);
            }
复制代码

 

使用key()方法，向其中出入索引即可获取对应的键

 

四、localStorage其他注意事项

 一般我们会将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)

 



查询资料的链接；

1，http://blog.csdn.net/wujiangwei567/article/details/46350295

2，http://www.jianshu.com/p/39ba41ead42e；

记得前端大神winter说过：要建立起自己的知识体系，第一步：寻找线索(找准确、全面的)；第二步，建立联系；第三步，是分类(用思维导图)，第四步，是追本溯源(找到最初的那个它～)

今天，怀着崇拜大神的心情，来学习下 localStorage的基本用法。用到的学习机是chrome浏览器，毕竟大厂权威性还是可以的。

我首先在开发者工具的Console中，输入了

localStorage.

然后就弹出了一些列宿主（浏览器）提供的localStorage自带的方法，摘录了一些常用的API如下表所示：

名称作用
clear清空localStorage上存储的数据
getItem读取数据
hasOwnProperty检查localStorage上是否保存了变量x，需要传入x
key读取第i个数据的名字或称为键值(从0开始计数)
lengthlocalStorage存储变量的个数
propertyIsEnumerable用来检测属性是否属于某个对象的
removeItem删除某个具体变量
setItem存储数据
toLocaleString将（数组）转为本地字符串
valueOf获取所有存储的数据

清空localStorage

localStorage.clear()    // undefined    
localStorage            // Storage {length: 0}

存储数据

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage {name: "caibin", length: 1}

读取数据

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
    console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));
}

删除某个变量

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

检查localStorage里是否保存某个变量

// 这些数据都是测试的，是在我当下环境里的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')  // false

将数组转为本地字符串

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

将JSON存储到localStorage里

var students = {
    xiaomin: {
        name: "xiaoming",
        grade: 1
    },
    teemo: {
        name: "teemo",
        grade: 3
    }
}

students = JSON.stringify(students);  //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里

var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象
说一下这个纠结的东西：简单说是跨js传递json值，通过localStorage中转，有种压缩和解压缩的味道在。其实应该有个公共的变量.js放在最前面，会不会更好呢。我好像是在这样一个场景下用到的：后台传递json格式的经纬度给前台，前台让它在地图上渲染出来，而且是两个不同的js文件传递，然后就使用了这个方法。不过现在想想应该有其它更好的解决方法吧。




3，http://www.zhangxinxu.com/wordpress/2011/09/html5-localstorage%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/

案例




  

    
nn_nana
关注
本地存储（localStorage）
l_ychee的博客
03-26 1207
本地存储（localStorage） 1.概念：window对象下面的属性,html5新增的，将5M大小的数据存储本地的浏览器上面。 2.存储的位置：浏览器控制面板–application–左侧面板local Storage 3.本地存储localStorage特点： ①本地存储属于永久存储，除非手动删除。 ②html5新增的,高版本的浏览器支持。 ③目前所有的浏览器都会把localStorage...
localStorage使用总结
weixin_33675507的博客
06-26 5217
一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。   二、localStorag...
SessionStorage和loacalStorage区别
最新发布
kaisersama__的博客
07-06 738
SessionStorage中存储的数据在当前会话期间有效，即当页面关闭时数据将被清除。
localStorage
chu_geng的博客
05-16 535
关于页面获得data后无法传递，可以存在 localStorage里边 保存 window.localStorage.setItem('key', data) //注意setItme是有俩个参数的 获取 window.localStorage.getItem('key') 注意： localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，只能手动去删除。 删除...
localStorage（本地储存）
热门推荐
blackhehaha的博客
05-11 7万+
在HTML5中，加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。它只能存储字符串格式的数据，所以最好在每次存储时把数据转换成json格式，取出的时候再转换回来。 loca...
Html5 localStorage入门教程
09-28
在介绍Html5 localStorage入门教程时，通常会涉及到以下几个核心知识点： 1. localStorage的基本概念和特性，如它的跨会话持久性，以及与sessionStorage的区别。 2. localStorage的接口，包括存储数据、读取数据、...
Vue入门(四)LocalStorage的使用
fajing_feiyue的博客
11-27 5504
前言 这个系列是vue入门系列，在讲解的时候主要以例子，展示一些vue内容的基本用法。在vue项目中使用LocalStorage 的场景非常多，这里用一个小例子展示LocalStorage的使用。 案例 一、LocalStorage 的作用 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在
localstorage:.NET的LocalStorage-一种简单轻巧的工具，用于在dotnet（核心）应用中持久保存数据
05-10
入门 正在安装 首先，您可能想深入了解的。 想要更多，看看。 游戏结束后，只需将其添加到您的项目中即可。 NuGet软件包管理器： $ Install-Package LocalStorage NuGet CLI： $ nuget install LocalStorage ...
localStorage(本地存储)
w1313gone的博客
05-12 4318
localStorage的几种方法: localStorage.setItem(“key”,“value”):存储名字为key的一个值value，如果key存在，就更新value localStorage.getItem(“key”)：获取名称为key的值，如果key不存在则返回null localStorage.removeItem(“key”)：删除名称为“key”的信息，这个key所对应的value也会全部被删除 localStorage.clear()：清空localStorage中所有信息
什么是 localStorage
weixin_43120290的博客
06-08 262
什么是localStorage
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值