JS本地保存数据的几种方法
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本地保存数据的几种方法的更多相关文章
- 77.JS本地保存数据的几种方法
1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...
- PHP获取POST数据的几种方法汇总
一.PHP获取POST数据的几种方法 方法1.最常见的方法是:$_POST['fieldname']; 说明:只能接收Content-Type: application/x-www-form-urle ...
- react在router中传递数据的2种方法
概述 不传递数据叫什么单页面应用,渲染模块还需要http请求算什么单页面应用. 本文总结了react-router4中使用BrowserRouter时传递数据的两种方法,供以后开发参考,相信对其他人也 ...
- Asp.Net保存session的三种方法 (Dll文件更新导致session丢失的解决办法)
1. InProc模式(默认值):asp.net将session保存到当前进程中,这种方式最快,但是不能多台服务器共享session,且会话状态数据容易丢失. <sessionState mod ...
- JS实现随机颜色的3种方法与颜色格式的转化
JS实现随机颜色的3种方法与颜色格式的转化 随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...
- 关于Hive创建分区目录且能查到数据的三种方法
关于Hive创建分区目录且能查到数据的三种方法 1. 使用dfs -mkdir 和 dfs -put 分别创建分区目录和上传数据,此时执行msck repair table 表名 命令就能查询到数据 ...
- Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- js中判断数据类型的四种方法总结
js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...
- SQLServer 批量插入数据的两种方法
SQLServer 批量插入数据的两种方法-发布:dxy 字体:[增加 减小] 类型:转载 在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Ins ...
随机推荐
- HTML5新增功能
HTML5日期输入类型(date) 1.HTML5规范里只规定date新型input输入类型 HTML5里的dateinput类型给了给了浏览器实现原生日历的机会,从此之后,JavaScript版的日 ...
- Spark Worker原理和源码剖析解密:Worker工作流程图、Worker启动Driver源码解密、Worker启动Executor源码解密等
本课主题 Spark Worker 原理 Worker 启动 Driver 源码鉴赏 Worker 启动 Executor 源码鉴赏 Worker 与 Master 的交互关系 Spark Worke ...
- 推荐一个非常好用的Chrome扩展应用,用于美化Json字符串
这个Chrome扩展应用的名称叫JSON Viewer Awesome 1.0.6: 安装之后,在Chrome工具栏会出现一个紫色的小图标: 然后可以把任意Json字符串直接贴到Chrome界面里: ...
- posix进程间的通信
1.无名管道 1.1管道是Linux支持的最初Unix IPC形式之一,具有以下特点: 管道是半双工的,数据只能向一个方向流动:需要双方通信时,需要建立起两个管道: 只能用于父子进程或者兄弟进程之间( ...
- phonegap 捕获图片,音频,视屏 api capture
一. capture Api 简单介绍 capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问 方法: capture.capt ...
- Swift编程语言学习1.1——常量与变量
常量和变量把一个名字(比方maximumNumberOfLoginAttempts或者welcomeMessage)和一个指定类型的值(比方数字10或者字符串"Hello")关联起 ...
- 【[HNOI2015]菜肴制作】
\(SDSC\)讲过的题,复习一下 如果用一个小根堆来维护拓扑的话显然是会不行的,因为这样求出来的是字典序最小的拓扑序,并不一定是1尽可能在前 因为字典序是贪心的,如果前面的一位能小就尽可能的小,并不 ...
- SQL Server遍历所有表统计行数
DECLARE CountTableRecords CURSOR READ_ONLY FOR SELECT sst.name, Schema_name(sst.schema_id) FROM sys. ...
- SVN工具使用总结
SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subversion ...
- 树莓派图形界面启动chromium并全屏
方法1. 随便一搜都是这种方法 创建文件: /home/pi/.config/autostart/my.desktop 文件名随意, 后缀必须.desktop 文件内容: [Desktop ...