localStorage:

是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览器),属于本地持久层储存

sessionStorage:

用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。

localStorage与sessionStorage具有相同的API,以下方法都可以用于sessionStorage

localStorage存储方法

localStorage.name ='vanida;

localStorage["name"]='vanida';

localStorage.setItem("name","vanida");

  

//这三种设置值方式是一样的;

localStorage获取值方法

var name = localStorage["name"]

var name= localStorage.name

var name= localStorage.getItem("name");

//这三种获取值方式是一样的;

localStorage清除特定值方法

//清除name的值
localStorage.removeItem("name");

localStorage.name='';

localStorage清除所有值方法

localStorage.clear()

localStorage只能存储字符串,如果需要存储对象,首先要转化为字符串。利用JSON.stringify();

var person = {name:"vanida","sex":"girl","age":25};

localStorage.setItem("person",JSON.stringify(person));

// localStorage.person="{"name":"vanida","sex":"girl","age":25}"

注意:JSON.stringify()中不要忘了“i”,stringify而不是stringfy!

然后取出person的对象你可以用JSON.parse();

person = JSON.parse(localStorage.getItem("person"));

// {name: "vanida", sex: "girl", age: 25}

用localStorage来存储数据的一些经验的更多相关文章

  1. localStorage前端存储数据

    <!DOCTYPE html> <html> <head> <title>localStorage演示</title> <meta c ...

  2. HTML5学习笔记之客户端存储数据方法:localStorage(),sessionStorage()

    HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...

  3. localStorage 如何存储JSON数据并读取JSON数据

    localStorage是HTML5提供的再客户端实现本地存储的一种方法,但是localStorage方法只能存储字符串数据,有时候我们需要存储对象到本地比如:JSON:那么,localStorage ...

  4. 使用QML LocalStorage来存储我们的数据

    在先前的样例中.我们能够"使用SQLite offline storage API来存储应用的设置".我们也在例程"怎样在QML应用中动态改动ListModel中的数据并 ...

  5. HTML5在客户端存储数据的新方法——localStorage

    HTML5在客户端存储数据的新方法--localStorage localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上 ...

  6. JS 客户端(浏览器)存储数据之 localStorage、sessionStorage和indexDB

    基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionS ...

  7. 【转】HTML5 LocalStorage 本地存储

    原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...

  8. HTML5 LocalStorage 本地存储(转)

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

  9. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

随机推荐

  1. L09-Linux系统修改网卡名称(eth1修改为eth0)

    一.环境 VirtualBox + CentOS6.5 二.问题 有时候在克隆服务器之后配置网络时,或者在维护别人建好的服务器时,会遇到这样一种情况.如下图所示:   即:在接口配置文件ifcfg-e ...

  2. Java Web入门学习(三)Maven的配置与使用国内仓库

    一.Maven下载与配置 下载好的压缩包,压缩到D盘,或者其他盘符. 新建系统环境变量 MAVEN_HOME  值是压缩好的Maven目录. 比如: D:\apache-maven- 在path环境变 ...

  3. Android Library项目发布到JCenter最简单的配置方法

    前沿 网上的步骤看起来实在太麻烦,gituhb上偶然间看到的一个项目,经过实际验证确实可行.github连接:https://github.com/xiaopansky/android-library ...

  4. Android studio 获取每次编译apk时的日期

    项目中需要获取apk的编译日期,首先肯定是用手动的方式获取,但这样容易遗忘,怎么样通过代码的方式获取呢? 其实android 为我们提供了一个BuildConfig的类,android 每次编译的时候 ...

  5. web前端html快速入门

    HTML 学前端之间不得不知道一个网站:http://www.w3school.com.cn/ 网上有很多教程关于前端的,写的特别详细,也写的特别好.我们应该要自已理解,一些相应的前端的知识,不能只是 ...

  6. docker容器网络通信原理分析(转)

    概述 自从docker容器出现以来,容器的网络通信就一直是大家关注的焦点,也是生产环境的迫切需求.而容器的网络通信又可以分为两大方面:单主机容器上的相互通信和跨主机的容器相互通信.而本文将分别针对这两 ...

  7. python开发环境安装配置

    需要安装的软件: Python2.7.14和Python3.6.4   要在电脑上同时安装两个版本 开发工具:PyCharm 是一个jetbrains的python开发工具  idea系列之一 Pyt ...

  8. sparkthriftserver启动及调优

    Sparkthriftserver启用及优化 1.  概述 sparkthriftserver用于提供远程odbc调用,在远端执行hive sql查询.默认监听10000端口,Hiveserver2默 ...

  9. VUE脚手架,babel转码 常用命令

    vue-cli脚手架,单页面应用初始化时 npm -v 查看npm版本号 npm install vue-cli -g  全局安装vue-cli vue -V查看vue版本号,说明vue-cli已经安 ...

  10. 不会几个框架,都不好意思说搞过前端: Vue.js - 60分钟快速入门

    Vue.js——60分钟快速入门   Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...