localStorage介绍和使用

localStorage的使用

PHPer 2018-01-20 975次浏览 0条评论 0 0 0
三、localStorage的使用localStorage的浏览器支持情况:这里要特别声明一下,如果是使用IE浏览器的话,那么就要UserData来作为存储,这里主要讲解的是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这两种方法对其进行存取,不要问我这个为什么,因为这个我也不知道...

登录 | 立即注册

更新于:2018-01-20 20:49:14
    您需要登录后才可以评论。 登录 | 立即注册
    相关内容

    localStorage介绍和使用

    一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储...

    localStorage的使用

    localStorage其他注意事项

    Yii中DataProvider的使用

    1,DataProvider什么是数据提供者数据提供者可以获取数据,并提供给其他组件或页面使用可以获得列的数...

    软件使用总结

    先说说2018年的迅雷。今天用迅雷下载《银翼杀手2049》,下载速度也就700kb/s,上网带宽8M,下载时上网速

    2018年必须要吐槽下迅雷,开了迅雷网页打开很慢

    MYSQL8.0全文索引使用​

    以下的配置参数为啥是这样配置的。 在 [mysqld]的下面追加 需要将搜索短语长度设定合适 #MyISAM ft_min_word_len = 4; 默认值 ft_max_word...

    使用Laravel 5.4问题总结

    这里写下laravel5.4的总结,用laravel也有段时间了,优点就不用多说了,好上手,较易学较易用,blade模板...

    使用Laravel 5.4问题总结 Lost connection to MySQL server at 'reading initial comm...

    Laravel 5.4各种错误提示总结

    推荐内容

    怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台...

    在网上找的ss+SSTap的方式都不能通过SSTap的链接测试。最后找到了v2ray+SSTap的方式。 注意事项,首先单独有v2ray看能不能正常上网。另外加速时要v2ray和SST...

    使用V2Ray的mKCP协议加速游戏

    当前脚本已发布新版本,地址: https://github.com/kuoruan/shell-scripts/raw/master/kcptun/kcptun.sh 旧仓库已废...

    v2rayN已停止工作

    要安装.NET Framework 4.6 或者更高版本

    超省心游戏加速:Wireguard+udp加速(CentOS版)--(

    Wireguard+udpspeeder+udp2raw游戏加速方案 ---------------------------------------错误报告及解决-----------...

    wireguard+udpspeeder+udp2raw多用户配置

    Wireguard+udpspeeder+udp2raw游戏加速方案改进版-实测有效

    解决'nmake' 不是内部或外部命令,也不是可运行的程序

    在用gifsicle时,需要在其src目录下使用 nmake -f Makefile.w32 命令,报错 'nmake' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 于是网...