localStorage、cookie的使用总结

时间：2017-11-12 16:31:15 阅读：161 评论：0 收藏：0 [点我收藏+]

标签：资料传递学习交流交流群问题 key 模式单位 number

1、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；

})　

更多资料，进群领取

WEB前端学习交流群21 598399936

localStorage、cookie的使用总结

标签：资料传递学习交流交流群问题 key 模式单位 number

原文地址：http://www.cnblogs.com/luludehuhuan/p/7821710.html