localStorage是H5的新特性,主要用来本地存储,一般浏览器支持的大小是5M,不同浏览器会有所不同,解决了cookie存储空间不足的问题。

2、使用:
     ⑴、存

if(!window.localStorage){

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

return false;

}else{

var storage = window.localStorage;

// 方法1

storage["a"] = 1;

// 方法2

storage.b = 1;

// 方法3  推荐

storage.setItem("c", 3);

console.log(typeof storage["c"]); // string  int类型打印出来是string,localstorage只支持string类型的存储

}

⑵、取  

if(!window.localStorage){

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

}else{

    var storage=window.localStorage;

    // 方法1

    var a=storage.a;

    // 方法2

    var b=storage["b"]

    // 方法3 推荐

    var c = storage.getItem("c");

}


⑶、修改

if(!window.localStorage){

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

}else{

var storage=window.localStorage;

storage.b=1;

storage.b=4; // 直接修改

console.log(storage.b);

        }

⑷、删除

// 移除所有

localStorage.clear();

 

// 删除某个键值对

localStorage.removeItem("a");

⑸、key()方法

for(i=0;i<storage.length;i++){

    var key =storage.key(i);

    console.log(key) // 获取对应的键

    

}
⑹、存入为JSON形式时,先转为json字符串

function setStorage () {

var str_username = $("#loginname").val();  

var str_password = $("#password").val();

var storage=window.localStorage;

var data = {

username: str_username,

password: str_password

}

var d = JSON.stringify(data)

storage.setItem("data",d);

}

⑺、读取后用转为JSON对象

 //将JSON字符串转换成为JSON对象输出

            var json=storage.getItem("data");

            var jsonObj=JSON.parse(json);

            console.log(typeof jsonObj); // Object

3、局限:
     ①、IE8以上才支持
     ②、浏览器会把localstorage的值类型限定为string类型,JSON对象需要转换。
     ③、本质上是存取字符串,存储内容太多消耗空间,页面变卡。
     ④、localStorage在浏览器的隐私模式下不可读取
     ⑤、不能被爬虫抓取

Cookie
让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术。
使用jquery.cookie.js
1、引入jquery.cookie.js
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.cookie.js"></script>

2、设置 "会话"cookie

$.cookie('username', 'xy');

cookie有效期默认到用户关闭浏览器

3、设置有效时间
$.cookie('username', 'xy', { expires: 7 });

4、设置有效路径 
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });// 如果在整个网站中访问这个cookie需要这样设置有效路径:path: '/'

5、读取cookie
 $.cookie('username')

:cookie是基于域名来储存的。意思您要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。

6、删除cookie 

 $.cookie('username', null);   //通过传递null作为cookie的值即可

7、可选参数

$.cookie('the_cookie','the_value',{

    expires:7,  //(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;

    path:'/',   // (String)创建该Cookie的页面路径;

    domain:'jquery.com', // (String)创建该Cookie的页面域名;

    secure:true // (Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;

  }) 

LocalStorage存储和cookie存储的更多相关文章

  1. 本地存储(cookie&sessionStorage&localStorage)

    好文章,最全面.就查它吧:https://segmentfault.com/a/1190000004556040 1.DOM存储:https://developer.mozilla.org/zh-CN ...

  2. 本地存储之cookie、localStorage、sessionStorage

    一.本地存储分为cookie,以及新增的localStorage和sessionStorage 1.cookie存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有 ...

  3. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  4. javascript之存储数据-cookie,localStorage,sessionStorage

    cookie: 存储一些简单的数据,以文本形式放到本地,大小4kb 存储:document.cookie='name=value' 取值:document.cookie(字符串) 期限:expires ...

  5. 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

    本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)       1. 离线缓存(xxx.manifest)  H5处理离线缓存还是存在一些硬伤的,所以真实项 ...

  6. 浅谈浏览器存储(cookie、localStorage、sessionStorage)

    今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Co ...

  7. JavaScript一个cookie存储的类

    所有输出都在浏览器的控制台中 <script type="text/javascript"> /** * cookieStorage.js * 本类实现像localSt ...

  8. 离线应用与客户端存储(cookie storage indexedDB)

    离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...

  9. JavaScript高级编程———数据存储(cookie、WebStorage)

    JavaScript高级编程———数据存储(cookie.WebStorage) <script> /*Cookie 读写删 CookieUtil.get()方法根据cookie的名称获取 ...

随机推荐

  1. POJ 1102 - LC-Display

    Description A friend of you has just bought a new computer. Until now, the most powerful computer he ...

  2. MySQL命令:select查询语句

    SQL 中最常用的 SELECT 语句,用来在表中选取数据. 要记得的知识点如下: SELECT 语句格式: SELECT 要查询的列名 FROM 表名字 WHERE 限制条件: WHERE语句后: ...

  3. 2016年蓝桥杯省赛A组c++第9题(逆序串问题)

    /* X星球的考古学家发现了一批古代留下来的密码. 这些密码是由A.B.C.D 四种植物的种子串成的序列. 仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串). 由于年代久远,其中许 ...

  4. Chap3:区块链的衍生技术[《区块链中文词典》维京&甲子]

  5. Kafka – kafka consumer

    ConsumerRecords<String, String> records = consumer.poll(100);   /** * Fetch data for the topic ...

  6. DateTimePicker用法

    将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...

  7. AT命令text模式发送中文

    AT命令text模式发送中文 AT+CSCS=? 查询支持哪些编码 设置编码和编码格式等 AT+CMGF=1 //TEXT 模式 //AT+CSCS="UCS2" //设置编码 A ...

  8. Java+Selenium 如何处理Try/Catch

    场景:为了检查数据是否存在,如果存在就把数据删除,不存在则新增保存.因为我们需要做下数据初始化准备工作. 一.:Feature 示例: Scenario: E-251:维护薪资帐套明细 When I ...

  9. Servlet (三) 文件下载(只支持英文文件名)

    package cn.sasa.serv; import java.io.FileInputStream; import java.io.IOException; import java.io.Inp ...

  10. 洛谷P4823 拯救小矮人 [TJOI2013] 贪心+dp

    正解:贪心+dp 解题报告: 传送门! 我以前好像碰到过这题的说,,,有可能是做过类似的题qwq? 首先考虑这种显然是dp?就f[i][j]:决策到了地i个人,跑了j个的最大高度,不断更新j的上限就得 ...