1.Cookie 
这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了。COOKIE优点很多,使用起来很方便 
但它的缺点也很多: 
比如跨域访问问题;无法保存太大的数据(最大仅为4KB);本地保存的数据会发送给服务器,浪费带宽 等等;

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

sessionStorage: 
用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。 
有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 
1 缓存数据 
2 减少对内存的占用 
但是,storage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储。 
它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。

localStorage存储方法(sessionStorage类似) 
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”));

JS本地保存数据的几种方法的更多相关文章

  1. 77.JS本地保存数据的几种方法

    1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...

  2. PHP获取POST数据的几种方法汇总

    一.PHP获取POST数据的几种方法 方法1.最常见的方法是:$_POST['fieldname']; 说明:只能接收Content-Type: application/x-www-form-urle ...

  3. react在router中传递数据的2种方法

    概述 不传递数据叫什么单页面应用,渲染模块还需要http请求算什么单页面应用. 本文总结了react-router4中使用BrowserRouter时传递数据的两种方法,供以后开发参考,相信对其他人也 ...

  4. Asp.Net保存session的三种方法 (Dll文件更新导致session丢失的解决办法)

    1. InProc模式(默认值):asp.net将session保存到当前进程中,这种方式最快,但是不能多台服务器共享session,且会话状态数据容易丢失. <sessionState mod ...

  5. JS实现随机颜色的3种方法与颜色格式的转化

    JS实现随机颜色的3种方法与颜色格式的转化   随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...

  6. 关于Hive创建分区目录且能查到数据的三种方法

    关于Hive创建分区目录且能查到数据的三种方法 1. 使用dfs -mkdir 和 dfs -put 分别创建分区目录和上传数据,此时执行msck repair table 表名 命令就能查询到数据 ...

  7. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  8. js中判断数据类型的四种方法总结

    js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...

  9. SQLServer 批量插入数据的两种方法

    SQLServer 批量插入数据的两种方法-发布:dxy 字体:[增加 减小] 类型:转载 在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Ins ...

随机推荐

  1. HTML5新增功能

    HTML5日期输入类型(date) 1.HTML5规范里只规定date新型input输入类型 HTML5里的dateinput类型给了给了浏览器实现原生日历的机会,从此之后,JavaScript版的日 ...

  2. Spark Worker原理和源码剖析解密:Worker工作流程图、Worker启动Driver源码解密、Worker启动Executor源码解密等

    本课主题 Spark Worker 原理 Worker 启动 Driver 源码鉴赏 Worker 启动 Executor 源码鉴赏 Worker 与 Master 的交互关系 Spark Worke ...

  3. 推荐一个非常好用的Chrome扩展应用,用于美化Json字符串

    这个Chrome扩展应用的名称叫JSON Viewer Awesome 1.0.6: 安装之后,在Chrome工具栏会出现一个紫色的小图标: 然后可以把任意Json字符串直接贴到Chrome界面里: ...

  4. posix进程间的通信

    1.无名管道 1.1管道是Linux支持的最初Unix IPC形式之一,具有以下特点: 管道是半双工的,数据只能向一个方向流动:需要双方通信时,需要建立起两个管道: 只能用于父子进程或者兄弟进程之间( ...

  5. phonegap 捕获图片,音频,视屏 api capture

    一. capture Api 简单介绍 capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问 方法: capture.capt ...

  6. Swift编程语言学习1.1——常量与变量

    常量和变量把一个名字(比方maximumNumberOfLoginAttempts或者welcomeMessage)和一个指定类型的值(比方数字10或者字符串"Hello")关联起 ...

  7. 【[HNOI2015]菜肴制作】

    \(SDSC\)讲过的题,复习一下 如果用一个小根堆来维护拓扑的话显然是会不行的,因为这样求出来的是字典序最小的拓扑序,并不一定是1尽可能在前 因为字典序是贪心的,如果前面的一位能小就尽可能的小,并不 ...

  8. SQL Server遍历所有表统计行数

    DECLARE CountTableRecords CURSOR READ_ONLY FOR SELECT sst.name, Schema_name(sst.schema_id) FROM sys. ...

  9. SVN工具使用总结

    SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subversion ...

  10. 树莓派图形界面启动chromium并全屏

    方法1. 随便一搜都是这种方法 创建文件:  /home/pi/.config/autostart/my.desktop    文件名随意, 后缀必须.desktop 文件内容: ​[Desktop ...