1.突破cookie 4K限制，一般浏览器支持5M

2.增 删 改 查

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<script type="text/javascript">

 window.onload=function(){  

    if(!window.localStorage){

            alert("浏览器不支持localstorage");

            return false;

        }else{

            var storage=window.localStorage;

            //写入a字段--增或改

            storage["a"]=1;

            //写入b字段--增或改

            storage.b=1;

            //写入c字段 --增或改

            storage.setItem("c",3);

            //删除c

            storage.removeItem('c');

            //清空storage

            //storage.clear();

            //查询

            console.log('a:',storage.getItem('a'));

            storage.a;

            storage["a"];

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

        }

    }

</script>

</body>

</html>

增删改查

3.遍历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);

            }

4.存储为字符串

　 JSON.stringify() # json对象转为json字符串

　 JSON.parse() # json字符串转为json对象

前端本地存储localStorage的更多相关文章

  1. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  2. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  3. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  4. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  5. 本地存储 localStorage

    本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...

  6. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  7. HTML5本地存储 localStorage

    HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...

  8. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  9. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

  1. Spring HibernateTemplate与HibernateDaoSupport对比

    HibernateTemplate与HibernateDaoSupport两者都是spring整合hibernate提供的模板技术. 对于保存一个对象,HibernateTemplate需要先配置 配 ...

  2. OpenStack实践系列⑥构建虚拟机实例

    OpenStack实践系列⑥构建虚拟机实例 四.创建一台虚拟机图解网络,并创建一个真实的桥接网络 创建一个单一扁平网络(名字:flat),网络类型为flat,网络适共享的(share),网络提供者:p ...

  3. 文本内容查找grep、文件查找find、正则匹配

    一.文本内容查找工具 grep grep   egrep (文本过滤)   fgrep (不支持正则) 对文本的内容按照指定的匹配模式基于行来进行筛选 格式     grep [选项] 模式 文件 选 ...

  4. Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念

    Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念 进入到了Linux学习之CentOS第三篇了,这篇文章主要记录下对linux文件系统的初步认识,以及用户组.用户权限.文 ...

  5. 大数据python词频统计之本地分发-file

    统计某几个词在文章出现的次数 -file参数分发,是从客户端分发到各个执行mapreduce端的机器上 1.找一篇文章The_Man_of_Property.txt如下: He was proud o ...

  6. 2018年Android的保活方案效果统计

    一.常见保活方案 1.监听广播:监听全局的静态广播,比如时间更新的广播.开机广播.解锁屏.网络状态.解锁加锁亮屏暗屏(3.1版本),高版本需要应用开机后运行一次才能监听这些系统广播,目前此方案失效.可 ...

  7. Confluence 6 针对你的数据库类型确定校验 SQL

    不同的数据库通常要求不同的 SQL 校验查询.校验查询通常需要尽可能的简单,这个查询在链接从数据库连接池中取出的时候都会被执行一次. 针对不同的数据库类型,我们推荐先的校验查询 SQL: MySQL ...

  8. Confluence 6 自定义主面板

    主面板(dashboard)是你 Confluence 站点的默认载入页面.这个页面能够给用户能够找到其他页面的所有必须的工具,重新进入未完成的工作或者快速导航到喜欢的空间和页面 站点的欢迎信息将会在 ...

  9. ios消息机制

    ios消息机制介绍 ios 调用每一个方法的时候其实是走的ios的消息机制 举例介绍一下 创建一个Pserson类 有一个eat 对象方法 那么下面的代码可以用消息机制实现  导入消息头文件    # ...

  10. 【CSS】Bootstrap中select2+popover冲突

    网上搜索得到: It changes the position because the position is based on the popover's dimansions and select ...